Article Categories

Selected Reading

Stacking Elements in Layers using z-index Property using CSS

CSS Web Development Front End Technology

The CSS z-index property is used to control the stacking order of positioned elements. Elements with higher z-index values appear in front of elements with lower values, creating layers on the page.

NOTE − If overlapping elements do not have z-index specified, the element that appears last in the HTML document will show up on top.

Syntax

selector {
    z-index: value;
    position: relative | absolute | fixed | sticky;
}

Important: The z-index property only works on positioned elements (position: relative, absolute, fixed, or sticky).

Possible Values

Value	Description
`auto`	Sets the stack order equal to its parent (default)
`number`	Sets the stack order. Can be positive, negative, or zero
`initial`	Sets the property to its default value
`inherit`	Inherits the property from its parent element

Example 1: Basic Stacking with Positive z-index

The following example shows how elements stack with different z-index values −

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 150px;
        height: 150px;
        position: absolute;
        border: 2px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
    }
    
    .box1 {
        background-color: red;
        top: 50px;
        left: 50px;
        z-index: 1;
    }
    
    .box2 {
        background-color: blue;
        top: 100px;
        left: 100px;
        z-index: 2;
    }
    
    .box3 {
        background-color: green;
        top: 150px;
        left: 150px;
        z-index: 3;
    }
</style>
</head>
<body>
    <div class="box box1">Z-Index: 1</div>
    <div class="box box2">Z-Index: 2</div>
    <div class="box box3">Z-Index: 3</div>
</body>
</html>

Three overlapping colored boxes appear with the green box (z-index: 3) on top, followed by blue (z-index: 2), and red (z-index: 1) at the bottom.

Example 2: Negative z-index Values

Elements with negative z-index values stack behind elements with positive or zero values −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        padding: 50px;
        background-color: white;
    }
    
    .background {
        width: 300px;
        height: 200px;
        background-color: orange;
        position: absolute;
        top: 80px;
        left: 80px;
        z-index: -1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }
    
    .content {
        width: 250px;
        height: 150px;
        background-color: turquoise;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="background">Background (z-index: -1)</div>
    <div class="content">Content (z-index: 1)</div>
</body>
</html>

A turquoise box appears on top of an orange background box. The orange box with negative z-index appears behind the turquoise box with positive z-index.

Example 3: Modal Overlay Effect

A common use of z-index is creating modal overlays that appear above all other content −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }
    
    .open-btn {
        background-color: #4CAF50;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }
    
    .modal-overlay {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .modal-content {
        background-color: white;
        margin: 15% auto;
        padding: 20px;
        border-radius: 8px;
        width: 300px;
        text-align: center;
        position: relative;
    }
    
    .close-btn {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 5px;
    }
    
    .close-btn:hover {
        color: black;
    }
</style>
</head>
<body>
    <h1>Modal Overlay Example</h1>
    <p>Click the button below to open a modal with high z-index.</p>
    <button class="open-btn" onclick="openModal()">Open Modal</button>
    
    <div id="modal" class="modal-overlay">
        <div class="modal-content">
            <span class="close-btn" onclick="closeModal()">×</span>
            <h2>Modal Dialog</h2>
            <p>This modal appears above all other content because it has a high z-index value (1000).</p>
        </div>
    </div>
    
    <script>
        function openModal() {
            document.getElementById('modal').style.display = 'block';
        }
        
        function closeModal() {
            document.getElementById('modal').style.display = 'none';
        }
    </script>
</body>
</html>

A page with a button that opens a modal dialog. The modal appears as an overlay with a semi-transparent background, demonstrating how z-index creates layering effects.

Key Points

Higher z-index values appear in front of lower values
Z-index only works on positioned elements (not static)
Default z-index value is auto (equivalent to 0)
Negative values place elements behind the normal document flow
Common z-index values: tooltips (100), dropdowns (200), modals (1000)

Conclusion

The z-index property is essential for controlling element stacking order in web layouts. Use positive values to bring elements forward, negative values to push them back, and always remember that positioning is required for z-index to work.

AmitDiwan

Updated on: 2026-03-15T13:56:39+05:30

383 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next