https://nalar.dev/tags/stacking-context/ Recent content in Stacking Context on Nalar Hugo en-us Fri, 04 Sep 2026 00:00:00 +0700 https://nalar.dev/debug-css-z-index-with-stacking-contexts/ Fri, 04 Sep 2026 00:00:00 +0700 https://nalar.dev/debug-css-z-index-with-stacking-contexts/ <p>A <code>z-index</code> bug often looks irrational. You give a menu <code>z-index: 9999</code>, yet a header still covers it. Increasing the number to <code>999999</code> changes nothing. The natural conclusion is that <code>z-index</code> is unreliable.</p> <p>It is not. The mistake is usually comparing numbers that belong to different <strong>stacking contexts</strong>.</p> <p>A stacking context is a local coordinate system for painting overlapping elements. Descendants are ordered inside that context, and then the entire context participates as one unit in its parent&rsquo;s stacking order. A child with a huge <code>z-index</code> cannot escape a parent that is painted below a sibling context.</p>