Positioning and Stacking

Positioning changes how a box participates in layout. Use normal flow, Flexbox, or Grid first; use positioning for overlays and intentionally attached elements.

Relative, absolute, fixed, sticky

01.card { position: relative; }
02.card__badge { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
03.site-header { position: sticky; top: 0; z-index: 10; }

An absolute element uses its nearest positioned ancestor. Fixed positioning uses the viewport in common cases. Sticky behaves in flow until it reaches an inset boundary within its scroll container.

Stacking contexts

z-index compares elements inside the same stacking context. Transforms, opacity below one, filters, isolation, and positioned elements with a z-index can create new contexts.

01.app { isolation: isolate; }
02.dialog-backdrop { position: fixed; inset: 0; z-index: 100; }

Keep this

Keep content in flow, establish a small z-index scale, and test sticky and overlay behavior inside real scroll containers.