CSS: z-index

What is Z Index

When a element goes into a layer, it may overlap with other elements. To control which goes in front, use the property z-index .

• Larger value means it shows in front.
• Value can be 0 or negative, or positive.
• Default value is 0

The z-index property is meaningful only if the element has one of:

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

• CSS: Position Property

Example

There are 2 overlapping boxes on this page, box A and B. 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;
}