CSS Stacking Context – jak funguje vrstvení elementů a z-index

Stacking context (kontext vrstvení) je jeden z nejdůležitějších konceptů v CSS, který určuje, v jakém pořadí se elementy vykreslují na obrazovce. Pokud jste někdy nastavili z-index: 9999 a element se přesto nezobrazil navrchu, pravděpodobně jste narazili právě na stacking context.

Co je stacking context

Stacking context si představte jako složku s papíry na stole. Každá složka může obsahovat více listů a pořadí listů uvnitř složky se dá měnit. Ale žádný list ze spodní složky se nemůže dostat nad složku, která leží navrchu. Každá složka je svůj vlastní stacking context.

Klíčová pravidla:

• Každý stacking context je nezávislý – hodnoty z-index se porovnávají pouze v rámci stejného kontextu.
• Vnořené stacking contexty se chovají jako atomická jednotka v nadřazeném kontextu.
• Element uvnitř jednoho stacking contextu se nemůže dostat nad element v jiném, nadřazeném kontextu.

Jak funguje z-index

Vlastnost z-index funguje pouze na posicovaných elementech (s position nastaveným na jinou hodnotu než static). Výjimkou jsou flex a grid položky, kde z-index funguje i bez explicitní posice.

/* Nefunguje - element je statický */
.box {
  z-index: 10;
}

/* Funguje - element je posicovaný */
.box {
  position: relative;
  z-index: 10;
}

/* Funguje i bez position u flex/grid položek */
.flex-container {
  display: flex;
}
.flex-container > .item {
  z-index: 10;
}

Hodnota z-index není absolutní – je to relativní pořadí mezi elementy ve stejném stacking contextu. Více o vlastnosti samotné najdete v článku z-index.

Maximální hodnota z-index

Teoretická maximální hodnota z-index je 2 147 483 647 – tedy maximální hodnota 32bitového celého čísla se znaménkem (231 - 1). Vyšší hodnoty prohlížeče oříznou na toto maximum. Minimální hodnota je symetricky -2 147 483 648.

V praxi ale nemá smysl používat tak vysoké hodnoty. Pokud potřebujete z-index: 2147483647, problém není v hodnotě, ale ve struktuře stacking contextů.

Co vytváří nový stacking context

Nový stacking context vzniká v těchto situacích:

Vlastnost	Podmínka
position + z-index	Posicovaný element s z-index jiným než auto
position: fixed / sticky	Vždy
opacity	Hodnota menší než 1
transform	Jakákoliv hodnota kromě none
filter	Jakákoliv hodnota kromě none
clip-path	Jakákoliv hodnota kromě none
mix-blend-mode	Hodnota jiná než normal
isolation	Hodnota isolate
will-change	Vlastnost, která by vytvořila stacking context
contain	Hodnota layout nebo paint

Typický problém

Představte si dva sourozence – jeden s z-index: 10 a druhý s z-index: 20. Každý z nich vytváří vlastní stacking context. Žádný potomek prvního elementu se nemůže dostat nad druhý element, i kdyby měl z-index: 99999:

<div class="parent-a">  <!-- z-index: 10 -->
  <div class="child">  <!-- z-index: 99999 - nepomůže! -->
  </div>
</div>

<div class="parent-b">  <!-- z-index: 20 -->
  <p>Tento element bude vždy navrchu.</p>
</div>

.parent-a {
  position: relative;
  z-index: 10;
}

.child {
  position: relative;
  z-index: 99999; /* Stále pod .parent-b */
}

.parent-b {
  position: relative;
  z-index: 20;
}

Element .child sice má z-index: 99999, ale jeho stacking context je omezen rodičem .parent-a, který má z-index: 10. Prohlížeč porovnává .parent-a (10) s .parent-b (20) – a .parent-b vyhrává.

Vlastnost isolation

Vlastnost isolation: isolate je nejčistší způsob, jak vytvořit nový stacking context. Na rozdíl od ostatních metod nemá žádné vedlejší efekty – nemění průhlednost, nepřidává transformaci ani neovlivňuje posicování.

.wrapper {
  isolation: isolate;
}

To se hodí například když chcete omezit z-index uvnitř komponenty, aby neovlivňoval zbytek stránky:

/* Komponenta s vlastním stacking contextem */
.dropdown {
  isolation: isolate;
}

.dropdown__menu {
  position: absolute;
  z-index: 10; /* Platí jen uvnitř .dropdown */
}

Podpora v prohlížečích

Vlastnost isolation je podporována ve všech moderních prohlížečích od ledna 2020 (Chrome 41+, Firefox 36+, Safari 8+, Edge 79+). V roce 2026 ji můžete používat bez obav – podpora je prakticky universální.

Pořadí vykreslování

V rámci jednoho stacking contextu se elementy vykreslují v tomto pořadí (od pozadí k popředí):

1. Pozadí a ohraničení elementu, který vytváří kontext
2. Potomci se záporným z-index
3. Neposicované blokové elementy (v pořadí zdrojového kódu)
4. Neposicované plovoucí elementy (float)
5. Neposicované inline elementy
6. Posicované elementy s z-index: 0 nebo auto
7. Posicované elementy s kladným z-index

Ladění v DevTools

Problémy se stacking contextem se nejlépe ladí v prohlížeči. V Chrome DevTools můžete:

• V záložce Layers vidět visuální vrstvení elementů.
• V panelu Elements zkontrolovat vypočítanou hodnotu z-index a position.
• Použít rozšíření jako CSS Stacking Context Inspector pro Firefox.

Praktické tipy

• Nepoužívejte extrémně vysoké hodnoty z-index (jako 9999). Pokud to nefunguje, problém je ve stacking contextu, ne v hodnotě.
• Používejte isolation: isolate na kořenové elementy komponent.
• Dávejte pozor na opacity, transform a filter – mohou nechtěně vytvořit nový stacking context.
• Definujte si systém z-index hodnot pomocí CSS proměnných:

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

Odkazy

• Unstacking CSS Stacking Contexts (Smashing Magazine)
• Stacking context (MDN)
• What The Heck, z-index?? (Josh W. Comeau)