Question 1

What is CSS z-index?

Accepted Answer

Z-index is a CSS property that controls the vertical stacking order of positioned elements (those with position set to relative, absolute, fixed, or sticky). Higher z-index values appear on top of lower values.

Question 2

Why isn't my z-index working?

Accepted Answer

Z-index only works on positioned elements (position: relative/absolute/fixed/sticky). Also, a new stacking context is created when an element has opacity < 1, transform, filter, isolation, or a z-index value. The element will only stack relative to siblings within its own stacking context.

Question 3

What is a stacking context?

Accepted Answer

A stacking context is a 3D concept where elements form a stacking hierarchy. Inside a context, z-indexes are relative. Common stacking-context triggers: position with z-index, opacity < 1, transform != none, filter != none, isolation: isolate, and will-change with certain properties.

Question 4

Can I drag elements to see them overlap?

Accepted Answer

Yes. Click and drag any box in the visualization to move it around the stage. Adjust z-index, position type, opacity, and transforms to see how they affect the stacking order in real time.

📚 Stacking Order Rules