Stacking Context Traps in CSS

Have you ever set z-index: 9999 on a tooltip, but it still rendered underneath a neighboring card? This occurs because of a CSS Stacking Context.

In CSS, z-index values are not global; they only compete against elements within the same stacking context. If a parent container creates a new stacking context, all its children are trapped inside it.

Common CSS properties that unintentionally trigger a new Stacking Context:

• transform (e.g., transform: translate(0, 0) or scale(1.02) on card hover)
• opacity less than 1 (e.g., opacity: 0.99)
• filter (e.g., backdrop-filter: blur(8px))
• will-change (e.g., will-change: transform)

The Design System Solution: React Portals Floating elements (tooltips, modals, dropdowns) should render via a Portal directly into document.body at the root level, bypassing all parent stacking contexts entirely.