div ( z-index: 1; /* integer */ )z-indexVlastnost CSS řídí vertikální překrývání pořadí prvků, které se překrývají. Stejně jako v tom, který z nich vypadá, jako by byl fyzicky blíže k vám. z-indexovlivní pouze prvky, které mají jinou hodnotu polohy než static(výchozí).
Prvky se mohou překrývat z různých důvodů, například relativní umístění je posunulo přes něco jiného. Záporná marže přetáhla prvek přes jiný. Absolutně umístěné prvky se navzájem překrývají. Nejrůznější důvody.
Bez jakékoli z-indexhodnoty se prvky hromadí v pořadí, v jakém se objevují v DOMu (nejnižší se nachází na stejné úrovni hierarchie nahoře). Prvky s nestatickým umístěním se vždy zobrazí nad prvky s výchozím statickým umístěním.
Všimněte si také, že hnízdění hraje velkou roli. Pokud prvek B sedí na vrcholu prvku A, podřízený prvek prvku A nemůže být nikdy vyšší než prvek B.
Všimněte si, že starší verze IE tento kontext trochu pokazila. Zde je oprava jQuery.
Více informací
- Screencast: Jak funguje z-index
- Dokumenty MDN
- Obsáhlý článek: Porozumění z-indexu
- Racionální hodnoty z-indexu
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Funguje | Funguje | Funguje | Funguje | 4+ | 4+ | Funguje |