CSS Z-index

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Z-index property controls the stacking order of positioned elements on a webpage.

When two or more elements overlap, the element with the higher z-index value appears in front of the others. The supporting concepts are explained in CSS Position and Normal Flow.

Think of z-index as layers stacked on top of each other:

Higher z-index = Closer to the user
Lower z-index = Further behind

Z-index is commonly used for:

Navigation menus
Popups and modals
Tooltips
Dropdown menus
Floating buttons

Syntax

CSS Z-index Syntax

css

selector {
    z-index: value;
}

PreviousCSS Overflow NextIntrinsic Sizing

Property	Description	Example
z-index	Sets stacking order	z-index: 5;
z-index	Higher value appears in front	z-index: 100;
z-index	Lower value appears behind	z-index: 1;
z-index	Negative stacking order	z-index: -1;
z-index	Default stacking order	z-index: auto;

CSS Z-index Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Z-index Example</title>
    <style>
        .container {
            position: relative;
            height: 250px;
        }
        .box1 {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 150px;
            background-color: lightblue;
            z-index: 1;
        }
        .box2 {
            position: absolute;
            top: 60px;
            left: 80px;
            width: 200px;
            height: 150px;
            background-color: orange;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1 (z-index: 1)</div>
        <div class="box2">Box 2 (z-index: 2)</div>
    </div>
</body>
</html>

Element	Typical Z-index
Page Content	1
Sticky Header	100
Dropdown Menu	1000
Modal Window	10000
Tooltip	100000

CSS Z-index

Syntax

Attributes

Example

Browser Support

Notes

Common Layering Example

Conclusion