WebDev.wiki > CSS > CSS vlastnosti a hodnoty > z-index

z-index

Definice a použití

CSS vlastnost z-index definuje umístění prvku nebo elementu na ose z. Zjednodušeně řečeno určuje jaký prvek bude zobrazen v popředí a který naopak v pozadí (za jinými prvky či elementy).

CSS syntaxe

z-index: z-index;

Hodnoty vstupů	Popis	Hodnota
z-index	definuje způsob umístění prvku v ose z, zda je umístěn v popředí nebo v pozadí mezi ostatními prvky	auto, kladné nebo záporné číslo

auto - prvky v kódu později budou vykresleny nahoře (z hlediska překrývání, tedy ose z)
kladné číslo - čím vyšší číslo, tím bude prvek vykreslen více nahoře a překrývat ostatní
záporné číslo - čím nižší číslo (ve smyslu počítání od 0), tím více bude prvek vykreslován pod ostatní prvky a ostatní ho budou překrývat

Ukázka:

CSS

/* Element je zobrazen pod ostatními elementy v levém horním rohu */
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Použité vlastnosti: position, left, top, z-index

Tip1 Z-index funguje pouze u prvků s definovanou pozicí, tedy těch, které mají vlastnost position jako relative, fixed nebo absolute.

Tip2 Defaultní vlastností je auto, což je stejné jako číslo 0. To znamená, že nahoře (ve smyslu překrývání, tedy ose z) budou prvky, které jsou v kódu psané později.

Podpora webových prohlížečů

Firefoxano

Internet Explorerano

Google Chromeano

Safariano

Operaano