On this page

Z-index & Stacking Contexts

Badar KhalilUpdated September 30, 2026 6 min read

CSS Z-index and Stacking Contexts: Complete Guide

Focus keyword: CSS z-index. Z-index controls which element appears in front when elements overlap. Many developers set z-index: 9999 and still see bugs, because z-index only works inside a stacking context. In this lesson you will learn how layering really works, what creates a stacking context, how to organise z-index values and how to debug overlapping problems.

z-index not working, stacking context, isolation isolate, z-index scale with CSS variables, painting order, dropdown behind element, modal overlay, transform creates stacking context, opacity stacking context, will-change, top layer, dialog element, popover attribute, negative z-index, layered design, CSS debugging.

1. What z-index Does

The z axis points from the screen towards the user. A higher z-index value is painted closer to the user. Z-index accepts integers (positive, zero or negative) or auto. It works on:

Positioned elements (relative, absolute, fixed, sticky).
Flex items and grid items, even when position is static.

On a normal static block element z-index is ignored. This is the number one reason for z-index not working.

2. Default Painting Order

Without z-index, elements are painted in this order inside one stacking context, from back to front:

Background and borders of the context root.
Negative z-index children.
Normal flow block elements.
Floated elements.
Inline content (text).
Positioned elements with z-index auto or 0, in HTML order.
Positive z-index children, from low to high.

When two elements have the same level, the one later in the HTML is on top.

3. What Is a Stacking Context?

A stacking context is an isolated layer group. Children are sorted only among themselves, and the whole group is then placed as a single unit in its parent context. A child with z-index 9999 inside a context with z-index 1 can never rise above a sibling context with z-index 2.

Common ways to create a stacking context

The root element (html).
Positioned element (relative, absolute, fixed, sticky) with a z-index other than auto.
Fixed or sticky elements (always, in modern browsers).
Flex or grid item with a z-index other than auto.
opacity less than 1.
transform, filter, perspective, clip-path, mask.
isolation: isolate.
mix-blend-mode other than normal.
will-change for a property that would create a context.
contain: layout, paint or strict.

4. isolation: isolate

isolation: isolate creates a stacking context on purpose without any side effects. Put it on a component root so its inner z-index values stay inside the component and never fight with the rest of the page. This is the cleanest fix for layering bugs and a modern best practice for design systems.

5. Organising z-index with a Scale

Avoid random numbers like 999999. Define a small scale with custom properties and use it everywhere:

--z-base: 0
--z-dropdown: 100
--z-sticky: 200
--z-overlay: 300
--z-modal: 400
--z-toast: 500

Leave gaps so you can insert new layers later.

6. Negative z-index

A negative z-index sends an element behind its stacking context's in-flow content, useful for decorative backgrounds. If the parent does not create its own context, the element may go behind the parent's background and disappear. Add isolation: isolate to the parent to keep it visible.

Modern HTML offers the dialog element (with showModal()) and the popover attribute. They render in the browser's top layer, above all other content, regardless of z-index or ancestor stacking contexts. For modals, menus and tooltips, prefer them over manual z-index values.

8. How to Debug a Layering Bug

Check that the element is positioned or is a flex or grid item.
Walk up the ancestors and look for opacity, transform, filter, isolation or a positioned parent with z-index.
Compare the z-index of the nearest shared stacking context, not of the two elements.
Use browser DevTools: the Layers panel or the 3D view, and inspect computed styles.
Fix by moving the element in the DOM, removing the accidental context, or adding isolation on the correct parent.

9. Common Mistakes

Adding z-index to a static element.
Increasing the number endlessly instead of finding the stacking context.
Using transform on a parent and breaking a fixed or absolute dropdown inside it.
Setting opacity on a wrapper and accidentally creating a context.
Not keeping a shared z-index scale in the project.

Key Takeaways

Z-index is only compared within the same stacking context. Know what creates a context, use isolation: isolate on components, keep a z-index scale, and use dialog and popover for top-layer UI.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 24px; }
  .stage { position: relative; height: 200px; }
  .card { position: absolute; width: 140px; height: 100px; color: #fff; padding: 8px; }
  .a { background: #e76f51; top: 0; left: 0; z-index: 1; }
  .b { background: #2a9d8f; top: 30px; left: 60px; z-index: 3; }
  .c { background: #264653; top: 60px; left: 120px; z-index: 2; }
</style>
<div class='stage'>
  <div class='card a'>A z-index 1</div>
  <div class='card b'>B z-index 3</div>
  <div class='card c'>C z-index 2</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 24px; }
  .wrap { display: flex; gap: 16px; }
  .ctx { position: relative; width: 200px; height: 120px; padding: 8px; color: #fff; }
  .ctx1 { background: #264653; z-index: 1; }
  .ctx2 { background: #e9c46a; color: #000; z-index: 2; margin-left: -80px; }
  .inner { position: absolute; bottom: 8px; right: 8px; width: 140px; height: 50px; background: #e63946; z-index: 9999; }
</style>
<div class='wrap'>
  <div class='ctx ctx1'>Context 1 (z 1)<div class='inner'>z-index 9999</div></div>
  <div class='ctx ctx2'>Context 2 (z 2)</div>
</div>
<p>The red box has z-index 9999 but stays behind Context 2, because it is trapped in Context 1.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 24px; }
  .panel { position: relative; padding: 20px; background: #f1f1f1; border-radius: 12px; }
  .panel.isolated { isolation: isolate; }
  .panel::before { content: ''; position: absolute; inset: 10px; background: #8ecae6; z-index: -1; border-radius: 10px; }
  .row { display: flex; gap: 24px; }
  .row > div { flex: 1; }
</style>
<div class='row'>
  <div><p>Without isolation (background may hide)</p><div class='panel'>Panel content</div></div>
  <div><p>With isolation: isolate</p><div class='panel isolated'>Panel content</div></div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  :root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
  }
  body { font: 16px system-ui, sans-serif; margin: 0; min-height: 260px; position: relative; }
  .nav { position: sticky; top: 0; z-index: var(--z-sticky); background: #264653; color: #fff; padding: 12px; }
  .menu { position: absolute; top: 44px; left: 12px; z-index: var(--z-dropdown); background: #fff; color: #000; border: 1px solid #ccc; padding: 8px 16px; }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: var(--z-overlay); }
  .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 24px; z-index: var(--z-modal); border-radius: 12px; }
</style>
<div class='nav'>Navigation<div class='menu'>Dropdown item</div></div>
<div class='overlay'></div>
<div class='modal'>Modal above overlay, overlay above nav</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 24px; }
  dialog { border: 0; border-radius: 12px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  dialog::backdrop { background: rgba(0, 0, 0, .5); }
</style>
<button id='open'>Open modal (top layer)</button>
<dialog id='dlg'>
  <h3>Native dialog</h3>
  <p>No z-index needed. It is rendered in the top layer.</p>
  <button id='close'>Close</button>
</dialog>
<script>
  var dlg = document.getElementById('dlg');
  document.getElementById('open').addEventListener('click', function () { dlg.showModal(); });
  document.getElementById('close').addEventListener('click', function () { dlg.close(); });
</script>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const creators = [
  'position + z-index (not auto)',
  'opacity < 1',
  'transform',
  'filter',
  'isolation: isolate',
  'will-change: transform',
  'flex or grid item with z-index'
];

creators.forEach(function (item, index) {
  console.log((index + 1) + '. Creates a stacking context: ' + item);
});

Output

Press Run to execute.

Exercise: Fix the Hidden DropdownHTML

The dropdown appears behind the next card even though it has z-index 50. Find the stacking context problem and fix it so the dropdown shows above the second card.

Try it Yourself HTML

<style>
  .card { position: relative; padding: 20px; background: #eee; margin-bottom: 10px; }
  .card.one { opacity: .99; }
  .card.two { z-index: 1; background: #ccc; }
  .drop { position: absolute; top: 60px; left: 10px; width: 160px; padding: 10px; background: gold; z-index: 50; }
</style>
<div class='card one'>Card 1<div class='drop'>Dropdown</div></div>
<div class='card two'>Card 2</div>

Output

Press Run to execute.

Show expected output

Dropdown is visible above Card 2 after giving Card 1 a higher z-index or removing the accidental stacking context

This is a self-check — compare your result with the expected output above.

Exercise: Build a Z-index ScaleHTML

Create custom properties for dropdown, sticky, overlay and modal layers and use them on four elements so that modal is above overlay, overlay is above sticky and sticky is above dropdown.

Try it Yourself HTML

<style>
  :root { /* define your scale here */ }
  .dropdown { }
  .sticky { }
  .overlay { }
  .modal { }
</style>

Output

Press Run to execute.

Show expected output

Variables like --z-dropdown, --z-sticky, --z-overlay, --z-modal with increasing values and used through var()

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Z-index and Stacking Contexts: Complete Guide

Trending keywords covered in this lesson

1. What z-index Does

2. Default Painting Order

3. What Is a Stacking Context?

Common ways to create a stacking context

4. isolation: isolate

5. Organising z-index with a Scale

6. Negative z-index

7. The Top Layer: dialog and popover

8. How to Debug a Layering Bug

9. Common Mistakes

Key Takeaways