CSS: z-index

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

• Default to 0
• Value can be 0 or negative, or positive.
• Larger value are in front.

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

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

[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.

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;
}