CSS Z-Index: Syntax, Usage, and Examples

CSS z-index determines the stacking order of elements when they overlap. It controls which elements appear in front and which ones stay behind. The z-index property works only on elements with a position value other than static (i.e., relative, absolute, fixed, or sticky).

How to Use Z-Index in CSS

Use z-index by assigning a numerical value to an element with a defined position.

.element {
  position: absolute;
  z-index: 10;
}

A higher z-index value places the element in front of elements with lower values.

Default Behavior Without Z-Index

By default, HTML elements appear in the order they are written in the code. If two elements overlap, the browser displays the one written later in the HTML structure on top—unless z-index is specified.

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Since .box2 appears after .box1 in the HTML, it stays on top unless z-index values change the stacking order.

Using Negative Z-Index

A negative z-index places an element behind others but keeps it inside its parent container.

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

This technique is often used for background elements that should stay behind the content.

Z-Index with Multiple Elements

When multiple elements have z-index values, the element with the highest value appears in front.

.box1 {
  position: absolute;
  z-index: 5;
}

.box2 {
  position: absolute;
  z-index: 10;
}

In this example, .box2 appears on top of .box1 because it has a higher z-index.

When to Use Z-Index in CSS

1. Overlapping Elements

If elements overlap, adjusting their z-index ensures they appear in the correct order.

.card {
  position: absolute;
  z-index: 100;
}

This keeps the .card element in front of other elements.

2. Background Layers

To keep a background behind other elements, use z-index: -1.

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

This prevents it from interfering with interactive elements.

3. Floating Elements Like Modals

Modals, dropdowns, and tooltips require a high z-index to stay visible.

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

This ensures the modal always remains on top.

Examples of CSS Z-Index in Action

Stacking Text Over an Image

To place text on top of an image, use a higher z-index value for the text element.

.container {
  position: relative;
}

.text {
  position: absolute;
  z-index: 2;
  color: white;
}

The text stays visible over the image due to its higher z-index.

Creating Layers with Z-Index

Assign different z-index values to elements to create multiple layers.

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

.layer2 {
  position: absolute;
  z-index: 2;
}

With this setup, .layer2 appears above .layer1.

Fixing Z-Index Issues

If z-index isn’t working, check the position property. Elements with position: static ignore z-index.

.element {
  position: static;
  z-index: 10; /* This won't work */
}

Fix this issue by changing position to relative or absolute:

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

Understanding Stacking Context in CSS

A stacking context is a hierarchy that determines how elements are layered. Certain CSS properties create a new stacking context, including:

• position: absolute, relative, or fixed with a z-index other than auto
• opacity set to less than 1
• transform, filter, or perspective applied to an element

Example of Stacking Context

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

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

Even though .child has a z-index of 5, it remains inside the .parent stacking context. It won’t overlap elements outside .parent unless .parent has a higher z-index.

Learn More About Z-Index in CSS

What Does Z-Index Do in CSS?

The z-index property determines the order of overlapping elements. A higher value moves an element forward, while a lower value moves it behind other elements.

Background Image and Z-Index

To position a background behind other elements, use z-index: -1 along with position: absolute or fixed.

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

Changing Z-Index Dynamically

You can modify z-index with JavaScript:

document.getElementById("modal").style.zIndex = "1000";

This moves an element to the front dynamically.

CSS Z-Index vs. Display and Visibility

• z-index controls stacking order.
• display: none removes the element from the document flow.
• visibility: hidden hides the element but keeps its space in the layout.

Common Z-Index Mistakes

1. Forgetting to Set Position

   Elements with position: static ignore z-index.

2. Not Accounting for Stacking Contexts

   Nested elements only affect their local stacking context.

3. Using Too Many High Z-Index Values

   Instead of assigning arbitrarily high numbers, organize z-index values logically.

Best Practices for Using Z-Index

1. Use a Clear Hierarchy

   Assign z-index values consistently, such as modal (9999), dropdown (1000), and header (500).

2. Minimize the Need for High Z-Index Values

   Instead of setting z-index: 99999, restructure the HTML layout to avoid conflicts.

3. Check the Stacking Context

   If an element isn’t behaving as expected, inspect its stacking context using browser developer tools.

Example: Handling Z-Index in a Complex Layout

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

.sidebar {
  position: fixed;
  z-index: 900;
}

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

In this setup:

• The .modal appears on top of everything.
• The .header appears above the .sidebar.

CSS z-index is a crucial tool for managing overlapping elements. By understanding stacking contexts and properly assigning z-index values, you can efficiently control the visual hierarchy of your layouts.