<pre style="word-wrap: break-word; white-space: pre-wrap;">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 (&lt;html&gt;)
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.</pre>