What is z-index in CSS

CSS Z-Index: A Complete Guide

The z-index property in CSS manages the stacking order of elements, deciding which ones appear in front or behind when overlapping.  

1. What is z-index in CSS?

• z-index defines the stack order of elements.
• Elements with a higher z-index appear in front of those with a lower z-index.
• Only positioned elements (relative, absolute, fixed, or sticky) respond to z-index.

2. Why Use z-index?

• Overlapping Control – Manage which elements overlap others.
• Layering – Create multi-layer designs (modals, dropdowns, tooltips).
• Visibility – Ensure important elements (popups, sticky headers) stay on top.

3. How z-index Works (Example)

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
.box {
        position: absolute;
        width: 100px;
        height: 100px;
      }
.box1 {
        background: red;
        z-index: 1;
      }
.box2 {
        background: blue;
        top: 30px;
        left: 30px;
        z-index: 2;

      }

• Result: Box 2 appears on top of Box 1 because it has a higher z-index.

4. Key Points to Remember

• Higher Value = Higher Stack Order
• Negative z-index – Places elements behind their parent or background.
• Default Value – z-index: auto; (inherits or follows normal stacking).

5. Example: Layering Elements

<div class="background">Background</div>

<div class="content">Content</div>

<div class="popup">Popup</div>

.background {

        position: relative;

        z-index: 1;

      }

.content {

        position: relative;

        z-index: 2;

      }

.popup {

        position: absolute;

        z-index: 100;

      }

• Effect:
• popup stays on top of content and background.

6. Z-Index in Modals and Overlays

.modal {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.7);

        z-index: 999;

      }

• Use Case: Modals and overlays use high z-index to stay in front of the entire page.

7. Negative Z-Index (Behind the Parent)

.behind {

        position: relative;

        z-index: -1;

      }

• Effect: The element moves behind its parent but in front of the background.

8. Stacking Context (Important Concept)

• A new stacking context forms when:
  • position: absolute | relative | fixed | sticky; with z-index other than auto.
  • opacity less than 1 (opacity: 0.9).
  • transform applied (transform: scale(1)).
• Elements inside a stacking context are layered within it, but not with elements outside.

Example:

.parent {

        position: relative;

        z-index: 10;

      }

.child {

        position: absolute;

        z-index: -1;

      }

• Result: child cannot go behind parent even with z-index: -1.

9. Z-Index with Flex and Grid

• Flex/grid items respect z-index but need position set (relative, absolute, etc.).

.flex-item {
        z-index: 10; /* No effect without position */
      }

        z-index: 10; /* No effect without position */

      }

10. Example: Creating Layered Cards

<div class="card card1">Card 1</div>

<div class="card card2">Card 2</div>

.card {

        position: absolute;

        width: 200px;

        height: 300px;

      }

.card1 {

        z-index: 5;

        background: lightblue;

      }

.card2 {

        z-index: 10;

        top: 50px;

        left: 50px;

        background: coral; 

      }

• Result: card2 overlaps card1 due to higher z-index.

11. Best Practices for Using z-index

1. Avoid High z-index Values – Large values (99999) make debugging hard.
2. Create Stacking Contexts Wisely – Use relative or absolute to limit scope.
3. Plan Layering Early – Organize elements logically from the start.
4. Keep Values Manageable – Use increments like 1, 10, 100 for flexibility.
5. Use z-index for Critical Elements – Modals, popups, and tooltips should have clear stack priorities.

By mastering z-index, you can effectively layer and organize web elements, ensuring dynamic, user-friendly interfaces with precise control over visual hierarchy.