CSS: z-index

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.

Here's the code:

<div style="
position:fixed;
z-index:6;
bottom:10ex;
right:10ex;
">
<p style="background-color:yellow">Yellow Box</p>
</div>

<div style="
position:fixed;
z-index:7;
bottom:8ex;
right:8ex;
">
<p style="background-color:red">Red Box</p>
</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:

• position:absolute
• position:relative
• position:fixed