/ Gists / Stacking context
On gists

Stacking context

•
CSS CSS trick

info.txt Raw # 

/* NEVYTVÁŘÍ stacking context */
.div1 {
  position: relative;
}

/* VYTVÁŘÍ stacking context */
.div2 {
  position: relative;
  z-index: 0;  /* nebo jakákoliv jiná hodnota */
}

/* VYTVÁŘÍ stacking context */
.div3 {
  isolation: isolate;
}

Tady je kompletní seznam, co vytváří stacking context:
------------------------------------------------------
Root element (<html>)
position: fixed nebo sticky
position: relative/absolute + jakýkoliv z-index kromě auto
Element s opacity < 1
Element s transform, filter, backdrop-filter
Element s isolation: isolate
mix-blend-mode jiné než normal
perspective hodnota jiná než none
contain s hodnotou layout, paint nebo strict
-webkit-overflow-scrolling: touch

pozor.txt Raw # 

/* Řešení 1 */
div {
  position: relative;
  isolation: isolate;
}

/* Řešení 2 - stejný výsledek */
div {
  position: relative;
  z-index: 0;  /* nebo jakákoliv jiná hodnota */
}


Jediný rozdíl je v tom, že:
z-index ovlivňuje pozici elementu v rámci stacking contextu jeho rodiče
isolation: isolate vytvoří jen nový stacking context, ale neovlivní pozici elementu

Proto se isolation: isolate někdy považuje za "čistší" řešení, když chceš jen vytvořit nový stacking context a nepotřebuješ řešit překrývání s jinými elementy.

dalsi-info.txt Raw # 

Co dělá isolation: isolate?

Vytváří nový "stacking context" pro element
Všechny z-index hodnoty uvnitř tohoto elementu se vztahují pouze k tomuto novému kontextu
Zabraňuje "propadnutí" negativních z-indexů pod text

Stacking context je hierarchie elementů určující jejich překrývání. Vytváří se několika způsoby:

Kořenový element (<html>)
Element s position: relative/absolute a nenulovým z-index
Element s position: fixed nebo position: sticky
Element s opacity menší než 1
Element s transform, filter, perspective
A právě element s isolation: isolate

Ve tvém případě isolation: isolate říká prohlížeči: "Vytvoř nový kontext pro tento div a všechno uvnitř vykresluj relativně k němu, ne k celé stránce."
Proto se span s negativním z-indexem zobrazí pod ostatním obsahem divu, ale ne úplně "mimo hru".

=================

Když přidáš isolation: isolate nebo z-index, vytvoříš stacking context a negativní z-index se vztahuje k tomuto novému kontextu.
Je to jako bys vytvořil "novou vrstvu" - všechno uvnitř elementu se stacking contextem se vykresluje relativně k této vrstvě, ne k celé stránce.