CSS positioning removes an element from normal document flow and places it at a precise location. The five position values each create different placement behaviour relative to different reference points.
Why does it matter?
Dropdowns, modals, tooltips, sticky headers, and fixed sidebars all require CSS positioning. Without understanding containing blocks and z-index, elements appear in the wrong place or behind other content.
Learn all five CSS position values with practical examples — dropdowns, tooltips, sticky headers, and fixed buttons.
Real-World Use Cases
🗂️Dropdown menus - position:absolute on dropdown, relative on the menu item — it drops exactly below its parent.
💬Tooltips on hover - position:absolute tooltip positioned relative to its parent — appears at hover with z-index above other content.
📌Sticky table headers - position:sticky top:0 on th elements makes headers stick to viewport as user scrolls the table.
🛒Fixed cart icon - position:fixed bottom:20px right:20px keeps the cart in the viewport corner regardless of scroll.
Position Values
/* static: normal flow (default) */
/* relative: stays in flow, can be offset, creates containing block */
.moved { position: relative; top: 10px; left: 20px; }
/* absolute: removed from flow, positioned to nearest positioned ancestor */
.dropdown {
position: absolute;
top: 100%; /* directly below parent */
left: 0;
z-index: 100;
}
/* fixed: positioned to the viewport */
.floating-btn { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
/* sticky: relative until threshold, then fixed */
.table-header th { position: sticky; top: 0; z-index: 10; }
/* z-index only works on positioned elements (not static) */
.modal-overlay { position: fixed; z-index: 1000; }
.modal-content { position: relative; z-index: 1001; }
.tooltip { position: absolute; z-index: 500; }
.sticky-header { position: sticky; z-index: 50; }
/* STACKING CONTEXT GOTCHA:
A z-index:999 child INSIDE a z-index:1 parent
appears BEHIND z-index:2 elements outside that parent.
transform, opacity<1, will-change also create new contexts. */
Q: Why is my z-index not working?
Two reasons: (1) z-index only works on positioned elements (not static). (2) Stacking context: if your element is inside a parent with a lower z-index that creates a stacking context, the child cannot appear above elements outside that context. Check parent elements for transform, opacity less than 1, or will-change — these also create stacking contexts.
🧩
Test Your Knowledge
50 questions · Takes ~1500 seconds
Answer these questions to confirm you understood the article. Instant feedback on every answer.
Q1
What is the primary purpose of this topic in Career development?
Q2
In a Career technical interview, what do interviewers test?
Q3
What is the time/space complexity consideration for this Career topic?
Q4
When should a Career developer apply this technique?
Q5
What is the most common mistake when using this Career pattern?
Team Lead and Full-Stack Developer with experience in PHP, JavaScript, SQL, DSA, and System Design. Passionate about software engineering, scalable web technologies, and helping developers prepare for coding interviews and tech careers through practical tutorials and professional guidance.
Comments (0)
No comments yet. Be the first!
Leave a Comment