CSS: z-index

By Xah Lee. Date: . Last updated: .

This page shows you how to use CSS to create multiple layers, and how to use the position:fixed and z-index.

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

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>

Both have position:fixed. The yellow has z-index:6, and red has 7. So, red is in front.

“z-index” can be 0 or negative.

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

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.