O webu
Z-index

Vlastnost z-index slouží pro upravení chování překrývání elementů přes sebe. Písmeno z v názvu značí osu Z.

Má vliv pouze na posicované elementy, tj. hodnota position jiná než výchozí static (například absolute, relative nebo fixed).

Výchozí chování z-indexu

Výchozí chování CSS je takové, že element později umístěný v HTML kódu bude nejvíc nahoře (nejvíc vepředu v ose Z).

Čtvereček na ukázce tak překryje první element:

První element

Při opačném pořadí v kódu bude čtvereček pod druhým elementem:

Druhý element

Toto chování překrývání se týká pouze nestaticky posicovaných prvků. Cokoliv s výchozím position: static bude překryto čímkoliv s relative/absolution/fixed, nezávisle na umístění v kódu:

Druhý element se statickou posicí

Zápis z-indexu

Hodnoty z-indexu nabývají následujících hodnot:

auto

Výchozí hodnota. Totéž jako žádný z-index.

z-index: -1

Záporný z-index typicky vede ke schování elementu za obsah.

z-index: 1

Kladná hodnota potom zajistí posun elementu před ostatní.

z-index: 0

Pouze vytvoří novou skupinu, ve které se počítají z-indexy.

Rozdíl mezi z-index: auto a 0

Na první pohled se může zdát, že hodnoty auto i 0 dělají to samé. Tedy nedělají nic.

Není tomu tak. Nulová hodnota způsobí vytvoření nové skupiny.

Vlastnost z-index totiž postihuje i vnořené nestatické elementy uvnitř svého rodiče.

V případě neuvedení z-indexu nebo z-index: auto bude světlemodrý element, který je potomkem tmavěmodrého, překrývat růžový element (protože 1000 > 1).

Z-index: auto

V případě uvedení z-index: 0 by se vytvořila z tmavěmodrého elementu nová skupina, kde se úrovně počítají od nuly a nebylo by tak možné se z ní dostat nad růžový element:

Z-index: 0

Test chování z-indexu

Překrývání elementů při změně z-indexu je možné pozorovat na následující ukázce.

auto
auto
auto

Systém v indexech

Docela problematické je udržet v číslech indexů nějaký systém. Typicky kodér v momentě, kdy potřebuje něco překrýt, použije nějaké číslo v řádu desítek nebo stovek, aby měl jistotu, že to zafunguje. Třeba:

.ikona {
  z-index: 999;
}

Potom je například potřeba přidat na stránku fixní lištu:

.lista {
  z-index: 10;
}

A problém bude na světě. Drobná ikonka bude překrývat lištu.

Potenciálně problematické elementy lze rozdělit do následujících skupin:

  1. Drobné posicované elementy.
  2. Fixní lišty a panely.
  3. Lightboxy a překryvná okna.
  4. Dialogová okna, hlášky, indikace načítání.

Teoreticky by se mohlo nabízet mít pro každou skupinu stanovené rozmezí. Například:

.obycejny-element {z-index: 100}
.fixni-lista {z-index: 200}
.lightbox {z-index: 300}
.hlaska {z-index: 400}
.nacitani {z-index: 401}

Bohužel při používání stylů a skriptů třetích stran kvůli tomu může nastat problém.

Lepší postup mi tak přijde držet z-index co nejnižší (podobně jako sílu CSS selektorů) a zvedat ho po jedničkách, když už nejde jinak.

Vysoký z-index jde případně v jistém smyslu resetovat přidáním obalu s nízkým nebo nulovým z-indexem. I to má ale problém, protože se potom z vnořeného elementu nepůjde dostat výš, ani kdyby to bylo potřeba.

Odkazy jinam