---
title: "Why Z-Index Isn’t Working: CSS Stacking Contexts"
url: https://daily.dev/posts/why-z-index-isn-t-working-css-stacking-contexts-rmqcqbplr
source_url: https://playfulprogramming.com/posts/css-stacking-context
type: article
source: "Playful Programming"
author: "Corbin Crutchley"
published: 2026-03-16T21:48:44.930Z
updated: 2026-03-17T18:01:54.070Z
tags: ["webdev", "css", "html"]
reading_time: 15
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Why Z-Index Isn’t Working: CSS Stacking Contexts

**[Playful Programming](https://daily.dev/sources/playfulprogramming)** · [@crutchcorn](https://daily.dev/crutchcorn) · 15 min read · 0 upvotes · 0 comments

## Summary

CSS z-index often behaves unexpectedly due to browser painting order and stacking contexts. The post explains how browsers determine which elements render on top, covering painting order rules, how positioned vs. non-positioned elements differ, and how stacking contexts are created (e.g., via z-index on positioned elements, opacity < 1, flex/grid children). A key insight: a child element's z-index only applies within its parent stacking context, so a modal with z-index: 99 inside a header with z-index: 1 can never appear above a footer with z-index: 2. The post also covers nested stacking contexts and how frameworks like React, Angular, and Vue use portals to work around these constraints.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://playfulprogramming.com/posts/css-stacking-context>

## Similar posts on daily.dev

- [Unstacking CSS Stacking Contexts — Smashing Magazine](https://daily.dev/posts/unstacking-css-stacking-contexts-smashing-magazine-hkqsqzn4q) · Smashing Magazine · 7 upvotes · 0 comments
- [The Value of z-index](https://daily.dev/posts/the-value-of-z-index-x59pcmo3f) · CSS-Tricks · 3 upvotes · 0 comments
- [Chris’ Corner: Layers of Layers](https://daily.dev/posts/chris-corner-layers-of-layers-6taje5o0i) · CodePen · 3 upvotes · 0 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html)

[View this post on daily.dev](https://daily.dev/posts/why-z-index-isn-t-working-css-stacking-contexts-rmqcqbplr)