❮ Previous Next ❯

CSS Z-Index

  • Learn CSS z-index to control which elements appear in front or behind on your web page.

  • What is z-index in CSS ?

    The z-index property controls the stacking order of elements along the Z-axis (depth).

    In simple words:

    z-index decides which element appears in front and which stays behind.

    Think of the screen as a set of layers:

    • Higher layer → visible on top
    • Lower layer → stays behind

    Why is z-index Important ?

    Controls Stacking Order

    When elements overlap, z-index decides:

    Which element is visible
    Which element stays hidden behind

    Without z-index:

    Overlapping elements behave unpredictably

    With z-index:

    Clear visual control
    Clean, professional UI

    Real-life comparison:
    A stack of books — the book placed on top is seen first.

    Essential for Overlapping UI Elements

    z-index is heavily used in:

    • Dropdown menus
    • Modals and popups
    • Tooltips
    • Sticky headers
    • Image overlays

    Real-life comparison:
    A popup notification appearing above everything else.

    z-index works ONLY on positioned elements

    An element must have one of these:

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

    Wrong Example

Wrong z-index in CSS

z-index controls the stacking order of overlapping elements and works only on positioned elements (relative, absolute, fixed, or sticky). 

.box1 {
  z-index: 10;
}

  • This will NOT work (default position is static)

    Correct Example

Correct Use of z-index

z-index works when the element has a non-static position like relative, absolute, fixed, or sticky. 

.box1 {
  position: relative;
  z-index: 10;
}

  • Now z-index works correctly

Basic z-index Example

This example shows how z-index controls which overlapping element appears on top. 

<!DOCTYPE html>
<html>
<head>
    <title>z-index Example</title>
    <style>
        body {
            position: relative;
            height: 300px;
        }

        .box {
            width: 150px;
            height: 150px;
            position: absolute;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .red {
            background-color: red;
            top: 40px;
            left: 40px;
            z-index: 1;
        }

        .blue {
            background-color: blue;
            top: 70px;
            left: 70px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box red">Red</div>
    <div class="box blue">Blue</div>
</body>
</html>

  • Blue box appears on top
    Higher z-index always wins

    How z-index Values Work

    • Higher number → higher priority
    • Lower number → stays behind

    z-index: 1;     /* behind */

    z-index: 10;    /* above */

    z-index: 999;   /* very top */

    Important Tip

    You don’t need huge numbers.
    Only relative order matters.

    Negative z-index (Use Carefully)

    z-index supports negative values.

Negative z-index

z-index can use negative values to place an element behind others, but it works only on positioned elements. 

.background {
  position: absolute;
  z-index: -1;
}

  • Element moves behind others

    Real-life comparison:
    Wallpaper placed behind furniture.

    Be careful — the element can go behind the page background.

    z-index & Stacking Context (Important Concept)

    Sometimes z-index does not behave as expected.
    The reason is stacking context.

    A New Stacking Context Is Created When:

    • position + z-index is applied
    • opacity is less than 1
    • transform is used

    Child elements cannot escape their parent’s stacking context.

z-index & Stacking Context

A stacking context controls how elements stack on top of each other. Child elements cannot escape their parent’s stacking context, even if they have a higher z-index. 

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999;
}

  • Child stays above parent’s content.
    Child cannot overlap elements outside the parent.

    Real-life comparison:
    A paper inside a folder - no matter how high you lift it, it stays inside.

    Practical Use Cases

z-index for Modals & Popups

z-index ensures modals and popups appear above other page elements. 

.modal {
  position: fixed;
  z-index: 1000;
}

  • Always appears above page content

z-index for Dropdown Menus

z-index ensures dropdown menus appear above other content without being hidden. 

.dropdown {
  position: absolute;
  z-index: 100;
}
  • Appears above normal content

z-index for Sticky Headers

z-index ensures sticky headers stay above other content while scrolling. 

header {
  position: sticky;
  top: 0;
  z-index: 10;
}
  • Stays above scrolling content

z-index for Tooltips

z-index ensures tooltips appear above other elements without being hidden. 

.tooltip {
  position: absolute;
  z-index: 999;
}

  • Tooltip remains visible

    Common Mistakes

    Using z-index without defining position
    Using extremely large values unnecessarily
    Ignoring stacking context
    Confusing DOM order with z-index

    Best Practices for Using z-index

    Always define position
    Use small, meaningful numbers
    Maintain a clear z-index hierarchy
    Avoid random large values
    Understand stacking context thoroughly

    • z-index controls depth
    • Higher value → closer to the user
    • Works only on positioned elements
    • Essential for overlays and popups

    z-index controls stacking order
    Higher value appears on top
    Works only with positioned elements
    Critical for modals, headers, and tooltips
    Key concept for advanced CSS layouts

❮ Previous Next ❯