Skip to main content

Describe z-index, and it's stacking context

The z-index property controls the stacking order of elements on a web page.

An element with a greater stack order is always in front of an element with a lower stack order.

The z-index only works in combination with the positioned elements (position: absolute, position, relative, position: fixed, or position: sticky) and flex items.

Without a specified z-index, HTML elements are stacked based on their appearance order. Later elements appear on top of earlier ones if they overlap.

A stacking context forms when an element has a non-static position and a non-auto z-index. This limits z-index effects to a specific part of the layout.

Example

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

<style>
.container {
position: relative; /* Establishes a stacking context */
}

.box {
width: 100px;
height: 100px;
color: white;
position: absolute; /* Needed for z-index to take effect */
left: 50px; /* Overlap the boxes */
top: 50px;
}

.box1 {
background-color: red;
z-index: 1; /* Higher z-index, appears on top */
}

.box2 {
background-color: blue;
z-index: 0; /* Lower z-index, appears behind box 1 */
left: 100px; /* Slight horizontal shift */
top: 100px;
}
</style>