? CSS Z-Index

? Quick Overview

The z-index property in CSS controls the stacking order of elements when they overlap. A higher z-index value means the element appears closer to the user (on top of others). It only works on positioned elements (those with position: relative, absolute, fixed, or sticky).

Use z-index whenever you need precise control over which elements sit in front or behind in your layout.

? Key Concepts

Stacking order: Determines which element appears on top when elements overlap.
Positioned elements only: z-index works when position is relative, absolute, fixed, or sticky.
Higher wins: Elements with higher z-index values appear above those with lower values.
Equal z-index: If values are the same, the element that appears later in the HTML is on top.
Default value: z-index: auto, which follows normal document stacking rules.

? Syntax & Basic Usage

The basic syntax for z-index is simple: apply it to a positioned element to control its stacking level.

? View Basic z-index Syntax

/* Set z-index on a positioned element */
.box {
  position: relative;
  z-index: 10;
}

? Explanation

In this example, the element with class .box is positioned using position: relative. Giving it z-index: 10 means it will appear on top of other overlapping elements with a lower z-index (e.g. 0, 1, 5).

? Example – Four Overlapping Boxes

Imagine four overlapping boxes with different z-index values. The box with the highest value appears at the top of the stack, and the one with the lowest value appears at the bottom.

? View Overlapping Boxes Code

/* Four overlapping boxes with different z-index values */
.box-container {
  position: relative;
  width: 260px;
  height: 160px;
}

.box {
  position: absolute;
  width: 120px;
  height: 80px;
  padding: 8px;
  color: #ffffff;
  font-weight: 600;
}

.box1 {
  background: #0ea5e9;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.box2 {
  background: #22c55e;
  top: 40px;
  left: 60px;
  z-index: 3;
}

.box3 {
  background: #a855f7;
  top: 60px;
  left: 100px;
  z-index: 2;
}

.box4 {
  background: #f97316;
  top: 10px;
  left: 110px;
  z-index: 0;
}

? What Happens Here?

.box2 has z-index: 3 → appears on top of all other boxes.
.box3 has z-index: 2 → appears under box 2, but above boxes 1 and 4.
.box1 has z-index: 1 → appears above box 4 only.
.box4 has z-index: 0 → appears at the bottom of the stack.

All boxes are absolutely positioned within .box-container, so their z-index values are applied correctly.

? How z-index Affects Stacking Order

The browser decides which element is on top using a set of stacking rules:

Elements with a higher z-index appear on top of those with lower values.
If two elements have the same z-index, the one that appears later in the HTML is stacked on top.
z-index: auto (the default) follows the natural stacking based on document flow.
If an element is not positioned, the z-index property has no effect.

? Common z-index Use Cases

Modals & Overlays: Bring dialog boxes or overlays above the page content.
Navigation Menus: Ensure dropdown menus or sticky headers stay above other content.
Tooltips & Popups: Show tooltips over icons or text without being hidden.
Layered Images: Create layered image effects or backgrounds using different z-index values.

? High & Negative z-index Values

The z-index property accepts integer values (positive, negative, or zero). Higher values appear on top; lower or negative values can push elements behind others.

? View z-index Value Examples

/* Element forced to the very front */
.front {
  position: relative;
  z-index: 999;
}

/* Element pushed far behind others */
.behind {
  position: relative;
  z-index: -999;
}

? When to Use Extreme Values

Using very large or very small z-index values can be helpful for global elements (like modals or global overlays), but avoid randomly large numbers in many places—this can make layouts hard to debug and maintain.

? Tips & Best Practices

Always ensure elements using z-index are positioned with relative, absolute, fixed, or sticky.
Prefer small, meaningful ranges (e.g. 0–10) instead of random huge numbers.
Group related elements into the same stacking context (e.g. same container) when possible.
Test overlapping behavior in different browsers and screen sizes.
Keep your z-index values documented or consistent across the project.

? Try It Yourself – Practice Tasks

Create a button that opens a modal when clicked. Use z-index to ensure the modal is displayed on top of all content.
Layer two images using different z-index values and observe how they overlap when resized.
Build a sticky navigation bar with dropdown menus and ensure the dropdown stays above other page elements using z-index.

? Starter Code for a Simple Modal

/* Basic modal layout using z-index */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 50;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  z-index: 60;
}