CSS z-index Property

What You’ll Learn

The z-index property controls which overlapping element appears on top — essential for modals, dropdowns, and layered UI.

Introduction

The z-index property in CSS controls the vertical stacking order of elements that overlap. When elements overlap, the z-index value determines which one appears on top.

This property only works on positioned elements (those with a position value other than static), or on flex and grid items when z-index is set.

Definition and Usage

Use z-index when building modals, sticky headers, dropdown menus, tooltips, and any UI where elements share the same screen space. Pair it with position so the browser can layer elements correctly.

📝 Syntax

The syntax for the z-index property is simple and can be applied to any positioned element.

element {
  z-index: auto | <integer>;
}

Basic Example

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

Syntax Rules

• auto uses default stacking based on document order and stacking contexts.
• Integers can be positive or negative; higher values stack in front within the same context.
• z-index has no effect on position: static elements unless they are flex or grid items.
• Creating a new stacking context (e.g., with position + z-index) isolates child layering.
• The property is not inherited, but stacking contexts affect descendants.

Related Properties

• position — required for z-index on most elements
• opacity — values less than 1 can create a stacking context
• transform — non-none transforms create stacking contexts
• isolation: isolate — explicitly creates a new stacking context

🎯 Default Value

The default value of the z-index property is auto, which means the element will use the default stacking order based on its order in the HTML and its parent stacking context.

💎 Property Values

The z-index property accepts auto or an integer.

When to Use z-index

z-index is helpful whenever overlapping elements need a clear front-to-back order:

• Modals and dialogs — Layer backdrop and content above the page.
• Dropdown menus — Keep menus above neighboring buttons and cards.
• Sticky headers and toolbars — Ensure navigation stays above scrolling content when needed.
• Tooltips and popovers — Display hints on top of interactive UI.
• Decorative backgrounds — Use negative values to push shapes behind content.

Examples Gallery

In this example, we will stack three colored boxes using the z-index property.

<style>
  .box { position: absolute; width: 100px; height: 100px; }
  .box1 { background: red; z-index: 1; }
  .box2 { background: green; z-index: 2; }
  .box3 { background: blue; z-index: 3; }
</style>

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}

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

.group-a { position: relative; z-index: 1; }
.group-b { position: relative; z-index: 2; }
.child-high { position: absolute; z-index: 999; }

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

.card::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
}

♿ Accessibility

• Focus order vs visual order — Changing z-index does not change tab order. Keep keyboard focus logical.
• Modals — Trap focus inside dialogs and restore focus when closed; z-index alone does not make a modal accessible.
• Hidden content — Elements behind others may still receive pointer events unless you also manage visibility or pointer-events.
• Contrast — Overlapping layers should maintain readable text contrast.

z-index + position

z-index depends on positioning. Set position first, then choose a z-index that fits your UI layer scale.

/* Example layer scale */
.dropdown { position: absolute; z-index: 50; }
.sticky-header { position: sticky; z-index: 40; }
.modal { position: fixed; z-index: 100; }

💡 Best Practices