Z-Index & Overflow

Z-Index & Overflow

Stacking and clipping are core to many layouts.

Z-index

Control the stacking order with z-<number>:

<div class="z-10">...</div>
<div class="z-50">...</div>
<div class="-z-10">...</div>

• Any integer works in v4: z-0, z-10, z-50, z-999.
• z-auto uses the default stacking.
• Negative values like -z-10 put elements behind.

Remember z-index only works on positioned elements or flex/grid items.

Overflow

Control what happens when content overflows its box:

Per-axis: overflow-x-, overflow-y-.

<div class="h-64 overflow-y-auto">
  Lots of content...
</div>

Overscroll behavior

overscroll-auto (default), overscroll-contain (block chaining to parent), overscroll-none (no chaining, no bounce).

Visibility

visible (default), invisible (hidden but keeps space), collapse (hide table rows without affecting others).

Box-sizing

box-border (border-box, the Preflight default) and box-content (content-box).

TL;DR

• z-<number> controls stacking; any integer works.
• overflow-hidden, overflow-scroll, overflow-auto clip/scroll.
• invisible hides but keeps layout space.
• box-border is the default.