o tvorbě, údržbě a zlepšování internetových stránek
CSS vlastnost z-index určuje jakoby výšku prvku na ose z, kdyby se měl s jiným prvkem překrývat. Je to vlastně priorita při překrývání.
| hodnoty | priorita při překrývání pozicovaných prvků |
|---|---|
| auto | prvek je nahoře, pouze pokud je v kódu později |
| číslo | čím vyšší, tím blíže je ke čtenáři a překrývá ostatní vrstvy |
| záporné číslo | podsouvá se pod jiné vrstvy, ale v Mozille mizí (netestováno) |
Z-index funguje pouze u pozicovaných prvků, to jest u těch, které maji vlastnost position nastavenu na absolute, relative nebo fixed.
Normálně se uvažuje, že z-index je 0. To způsobí, že nahoře budou prvky, které jsou v kódu později. Mám za to, že z-index: 0 je totéž, co z-index: auto (pokud se pozicované objekty nezanořují).
Pokud použijete zápornou hodnotu z-index, tak to sice bude fungovat a bude to vespod, ale v Mozille se takový prvek vůbec nezobrazí. Testováno na win verzi Mozilly 1.2.
Velmi častá chyba v uvažování: vezmu jeden prvek, nastavím mu nízký z-index, aby byl vespod. Potom uvnitř toho prvku budu mít jiný prvek, kterému nastavím vysoký z-index, aby překryl ostatní prvky stránky. Jenomže nepřekryje! Dědí totiž částečně vlastnost toho vyššího prvku a už se nikdy nedostane "výš", i kdyby měl z-index milión.
Velmi dobře podporovaná vlastnost. Chybují prvky select, iframe a flashové objekty (object, embed), těm nejde z-index nastavit, protože jsou vykreslovány operačním systémem (ne prohlížečem).
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | ve verzi 5.0 extrémně chybuje průhledný flash | |
| Mozilla (Netscape 6+) | všechny verze | select nechybuje, záporné hodnoty nevykreslí |
| Opera | 3, 4, 5, 6, 7 | |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | ano | některé odkazy činí neklikacími, ačkoli jsou vidět |
zatím nejsou (je to od Z)
Jak psát web píše Yuhů, Dušan Janovský. Poslední aktualizace 01. května 2004.