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