07 · Positioning, scrolling and stacking contexts

Understand the mechanism

Relative positioning preserves the original flow space while shifting visual position. Absolute positioning leaves normal flow and uses a containing block, commonly established by a relatively positioned ancestor. Fixed positioning usually uses the viewport, though some ancestor properties change that. Sticky positioning remains in flow and sticks when its scrolling and inset conditions are met.

z-index is not a single unlimited ranking across the whole page. Positioning, opacity or transforms can establish stacking contexts that constrain descendants. A child with a huge number may still stay below another parent context. When a dropdown is clipped, also inspect ancestor overflow instead of endlessly increasing its z-index.

Runnable example

<style>
.card{position:relative;padding:40px 24px 24px;border:1px solid #ccd;max-width:400px}
.badge{position:absolute;top:10px;right:10px;background:#286c4d;color:white;padding:2px 8px}
</style>
<article class="card"><span class="badge">New</span><h2>Positioning practice</h2><p>The badge belongs to this card.</p></article>

Trace and verify

Observe the badge in the card corner. Remove relative from the card and inspect the changed positioning reference, then restore it and lengthen the content. Next clip the outer container and offset the badge outside its bounds. The resulting clipping is not fixed by z-index, demonstrating that stacking and clipping are different problems.

Common mistakes and boundaries

Avoid assembling long-form text with absolute positioning; longer translations will overlap. Sticky needs an appropriate inset and scrollable range, and ancestor scrolling behavior affects its reference. Hover-only popovers are difficult on touch screens; let a focusable button control disclosure.

Practice challenge

Add a status badge to a card and explain why the entire body should not also be absolutely positioned.

Reference solution and reasoning

The badge is an overlay and can leave flow, while the body should determine the card’s natural height. Removing the body from flow can stop the parent from expanding around it, allowing later content to overlap. Use layout systems for structure and positioning for targeted overlays.

Further reading

• MDN · Position