What CSS property is used to specify the stacking order of positioned elements?

The story behind the answer

The CSS property used to specify the stacking order of positioned elements is `z-index`.

When elements overlap, `z-index` helps determine which one is painted in front. Larger integer values generally place an element above elements with lower values within the same stacking context; negative values can place content behind other layers. A declaration such as `z-index: 10` is commonly used for menus, dialogs, tooltips, and overlays.

The property is often misunderstood because it does not create a universal page-wide ranking. Stacking contexts—created by conditions such as positioned elements with a z-index, transforms, opacity, and other properties—can isolate groups of elements. An element with `z-index: 9999` can still appear beneath another stacking context if its entire context is behind that context.

`position` controls how an element is positioned, while `float` affects flow and alignment. Neither property directly sets front-to-back order. The name comes from the z-axis idea in geometry and computer graphics: screen objects are treated as layers arranged toward or away from the viewer.

Source: Wikipedia · fact-checked Aug. 2026

Add question to a list

Choose a list to keep this question in: