CSS: z-index

By Xah Lee. Date: . Last updated: .

z-index controls the stacked layer order, of overlapping elements.

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

[see CSS: Position Property]

Example

Scroll around and look at the page, there are 2 overlapping boxes, box 1 and box 2. Their positions are fixed relative to the window.

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

BOX A
BOX B

Here is the code:

<div id="boxA3790">BOX A</div>

<div id="boxB7452">BOX B</div>
#boxA3790, #boxB7452
{
width:80px;
height:80px;
position:fixed;
color:black;
}

#boxA3790
{
top:300px;
right:20px;
z-index:5;
background-color:salmon;
}

#boxB7452
{
top:320px;
right:0px;
z-index:6;
background-color:gold;
}

CSS Layout

CSS Layers

JavaScript Using Css Layers