Z-index

Description

The z-index is a CSS (Cascading Style Sheets) property used to determine the stacking order of elements on a web page along the Z-axis, which is perpendicular to the screen. It controls which element appears in front of or behind others when they overlap.

Unlike the X-axis (horizontal) and Y-axis (vertical), which define the position of elements on a 2D plane, the Z-axis introduces a third dimension, enabling layering of elements. A higher z-index means the element is positioned closer to the viewer and will be displayed on top of elements with a lower index.

How It Works

Basic Syntax:

selector {
  z-index: value;
}

• Positive integers: Bring the element forward.
• Negative integers: Push the element back.
• Default (auto): Uses the stacking order of the parent.

Example:

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

In this example, .foreground will appear on top of .background.

Important Precondition: Positioning

The z-index property only works on elements with a positioning context. That means you must set one of the following:

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

If an element has position: static; (the default), z-index is ignored.

Stacking Context

A stacking context is a 3D conceptual layer that groups together elements. It affects how z-index behaves.

A new stacking context is created when:

• An element has a position value other than static and a z-index value other than auto.
• An element has certain CSS properties like:
  • opacity < 1
  • transform, filter, perspective
  • will-change
  • mix-blend-mode
  • isolation: isolate

Each stacking context is independent: elements inside one cannot overlap elements in another unless their stacking contexts are nested.

Stacking Order Hierarchy

When multiple elements overlap, their rendering order is determined by:

1. Root stacking context (usually the element)
2. Descendant stacking contexts
3. Z-index values within stacking contexts
4. Element order in the HTML (later elements are on top if z-index is equal)

Use Cases

Real-World Example: Modal Dialog

.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10;
}

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  z-index: 100;
}

Here, the modal appears above the overlay thanks to its higher z-index.

Common Mistakes

Debugging z-index Issues

1. Use browser dev tools: Inspect the stacking context.
2. Check computed styles: Look for position and z-index.
3. Inspect parent elements: They may create stacking contexts.
4. Use consistent z-index scale: (e.g., base = 100, modal = 1000)

Recommended z-index Strategy

z-index vs Other Layering Tools

z-index and Accessibility

• High z-index elements should not interfere with screen readers.
• Hidden modals should use display: none or visibility: hidden rather than just z-index: -1.

CSS Variables with z-index

You can use CSS custom properties to manage z-index in design systems.

:root {
  --z-modal: 1000;
  --z-overlay: 900;
}

.modal {
  z-index: var(--z-modal);
}

Performance Considerations

• Too many stacking contexts may lead to browser reflow and repaint.
• Overuse of large z-index values may clutter rendering hierarchy.
• Aim for minimal and organized use.

Related Terms

• CSS Positioning (relative, absolute, fixed, sticky)
• Stacking Context
• DOM Order
• Layering
• Modal Dialog
• Dropdown Menu
• Float
• Display Properties
• Opacity
• z-fighting (unrelated but similarly named)

Conclusion

The z-index property is essential for managing visual layering in web interfaces. While simple in concept, it can lead to complex behaviors due to stacking contexts and DOM hierarchies. Understanding how z-index works is crucial for UI/UX developers, especially when building responsive, interactive, and accessible user experiences.