Z-index

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í.

z-index
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 (ve smyslu překrývání) 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 ve starší Mozille se takový prvek vůbec nezobrazí. Testováno na win verzi Mozilly 1.2, minimálně od Firefoxu 3 to funguje správně.

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.

Podpora

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).

Podpora vlastnosti z-index
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 4, 5, 5.5, 6 ve verzi 5.0 extrémně chybuje průhledný flash
Firefox všechny verze select nechybuje, záporné hodnoty nevykreslí
Opera všechny verze  
Chrome ano  

Problémy s flashem lze někdy vyřešit tak, že se do tagu <object> u flashe zadá parametr <param name="wmode" value="transparent">. Nemám jednoznačné zkušenosti s tím, jak to funguje, ale zkuste to, pokud se při překrývání flashe jiným prvkem dostanete do problémů.

Příklady

Příklad na z-index

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.