Gotcha: CSS z-index only works with positioned elements

Setting z-index on an element has no effect. The element stays behind other elements despite a high z-index value.

z-index requires a stacking context. Ensure the element has one of:

/ z-index works with these position values: /
position: relative; / or absolute, fixed, sticky /
z-index: 10;

/ Also creates stacking context (no position needed): /
opacity: 0.99;
transform: translateZ(0);
will-change: transform;
isolation: isolate; / best explicit way /

/ Common trap: z-index on flex/grid children DOES work /
.flex-container { display: flex; }
.flex-child { z-index: 1; } / Works! /

/ Debug: use browser DevTools 3D view to visualize stacking /

z-index only applies within a stacking context. An element with position: static (default) does not participate in z-index ordering.