I want a CSS property to assign elements to explicit, absolute z-height layers

Submitted by Andrew Trefethen

This idea is currently being discussed.

CSS stacking today relies on z-index and stacking contexts, and they interact in ways that regularly surprise even experienced developers. The core problem is that z-index is only meaningful within a stacking context — so an element nested deep in the DOM may be impossible to layer above a sibling stacking context, no matter what z-index value you give it. To make things worse, certain CSS properties (like opacity, transform, will-change, and others) silently create a new stacking context, meaning adding an animation or GPU-composited effect to an element can inadvertently break the layering of its descendants.

I want a CSS property — something like z-height — that sets an explicit, global vertical position for an element, independent of stacking context. Key characteristics:

Absolute placement: A bare integer (e.g. z-height: 5) moves the element to that absolute layer in the page's global z-stack. <body> would default to z-height: 0.
Relative placement: A signed value (e.g. z-height: +1) would position the element relative to its parent's z-height, enabling composable component designs.
Fallback stacking: Elements sharing the same z-height would still stack according to existing stacking-context and z-index rules, preserving backward compatibility on sites that don't use the new property.
Use-case: Modals and overlays packaged inside reusable components could declare a high z-height and always appear on top, regardless of where in the DOM the component is used.

This would give developers a predictable escape hatch from the current fragile stacking-context model without breaking any existing behavior.

Tagged: CSS

Votes: 0
What are votes for and how are they tallied?

← See other wants