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