CSS: z-index

By Xah Lee. Date: . Last updated: .
css z index

z-index controls which element are on top, of overlapping elements.

“z-index” can be 0 or negative, or positive.

Look at the lower right, there are 2 overlapping boxes, one yellow and one red. Their positions are fixed relative to the window.

Both have position:fixed. One of them has higher z-index than the other, so it's in front.

RED BOX
YELLOW BOX

Here's the code:

<div style="
width:128px;
height:128px;
position:fixed;
bottom:350px;
right:350px;
z-index:5;
background-color:red
">
RED BOX
</div>

<div style="
width:128px;
height:128px;
position:fixed;
bottom:300px;
right:300px;
z-index:6;
background-color:yellow
">
YELLOW BOX
</div>

z-index ↔ position {absolute, relative, fixed}

The “z-index” is meaningful only for elements that has one of:

[see CSS Position: static, relative, fixed, absolute]

Reference

Visual formatting model#propdef-z-index

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth