#1 Osa Z
Manipulace s prvky na ose Z, nebo-li práce s 3 rozměrem stránky, se provádí pomocí vlastnosti z-index. Umožňuje skládat a vykreslovat prvky na sebe a to včetně možnosti umístit prvek pod prvek (záporný index) nebo nad prvek (kladný index).
Hodnoty
Vlastnost z-index může obsahovat následující hodnoty:
- auto – základní hodnota, pořadí určuje rodičovský prvek
- číslo – záporné i kladné, čím vyšší, tím je i prvek výše a naopak
- klíčové slovo inherit – vlastnost dědí po rodiči
#2 Příklad
<div id="obal">
<div class="box green">1. box</div>
<div class="box blue">2. box</div>
<div class="box red">3. box</div>
<div>
#obal {
position: relative;
width: 120px;
height: 120px;
background-color: gray;
}
.box {
position: absolute;
width: 50px;
height: 50px;
}
.box.green {
background-color: green;
z-index: 2;
top: 30px
}
.box.blue {
background-color: blue;
z-index: 3;
}
.box.red {
background-color: red;
z-index: 1;
top: 25px;
left: 25px;
}
Tento příklad zobrazí šedý prvek #obal s rozměry 120px × 120px, v němž se zobrazí tři prvky, ne však vedle sebe ale nad a pod sebou. I když je zelený prvek .box první, modrý druhý a červený třetí, zobrazí se v pořadí: modrý, zelený, červený; jelikož mají takto nastavené vlastnosti z-index, které přepisují jejich zobrazení.
Pokud by prvky s třídou .box neměly vlastnost z-index, zobrazovaly by se přímo nad sebou a byl by tak vidět poslední, červený, prvek.