Position

The four values

The pairing you will use most is .relative on a parent and .absolute on a child, which is how you put a badge on the corner of an avatar or an overlay across an image. position: absolute resolves against the nearest positioned ancestor, so forgetting the .relative means the child jumps to the viewport instead — usually to the top left of the page, which is the tell.

.sticky needs three things to work, and the third is the one that catches people: a position: sticky, an inset on the axis you are sticking to, and no ancestor with overflow: hidden, auto or scroll between it and the scroll container. If a sticky element simply does not stick, an ancestor's overflow is nearly always why — .overflow-clip is the fix, since it clips without creating a scroll container.

For a header that sticks to the top of the page, use .sticky-top rather than .sticky. It sets the inset, the --z-sticky token and the translucent backdrop in one class.

Insets

.inset-0 pins all four edges, which with .absolute is the full-cover overlay. The four single-edge classes are logical, so .inset-is-0 is the left edge in an English page and the right edge in an Arabic one, and a corner badge stays in the correct corner when the page flips.

<div class="relative" style="inline-size:8rem">
  <div class="square bg-soft r-md"></div>
  <span class="badge badge-solid absolute inset-be-0 inset-ie-0 mie-2 mb-2">New</span>
</div>

Stacking

There is exactly one z-index utility, and it is z-index: 1. That is not an omission. Stacking bugs come from competing numbers, and the fix is a small set of named layers rather than a bigger set of numbers — so Deck's overlays read tokens (--z-sticky, --z-nav, --z-sheet, --z-modal, --z-toast, in that order) and everything else is expected to sort itself out in document order.

.z-1 exists for the one honest case: lifting a positioned element above a sibling that comes after it in the source. If you find yourself wanting .z-50, the element probably belongs to one of the named layers, and the token is the thing to reach for.

When not to use these

• Not to build an overlay. .modal, .drawer and .sheet use the top layer, so they sit above everything with no z-index involved at all and get the focus trap and the backdrop with them.
• Not to pin a toolbar to the bottom of a phone screen. That is .tabbar, which also handles the home indicator inset.
• Not .fixed inside a transformed ancestor. A transform, filter or perspective anywhere above it makes that ancestor the containing block, and the element stops being fixed to the viewport. This is not a bug you can fix from the fixed element.
• Not .absolute for a layout. Absolutely positioned children are out of flow, so the parent does not grow around them. If the box needs to make room, it is a grid or a flex row.