⌘K

Vlastnost z-index

Vlastnost z-index určuje, kdo bude nahoře v případě, že se několik prvků překrývá.

Syntaxe

cssselektor {
  z-index: číslo | auto;
}

Číslo musí být celé, kladné nebo záporné. Může být nulou.

Hodnoty

Hodnota Popis
Číslo Celé číslo nastavuje pořadí vrstev prvků: při vrstvení prvků na sebe bude nahoře ten, jehož z-index je větší.
auto Pořadí vrstev je budováno automaticky: výše bude ten prvek, který je v HTML kódu umístěn níže.

Výchozí hodnota: auto.

Příklad

V tomto příkladu se bloky budou vrstvit na sebe v pořadí, v jakém jsou v HTML kódu (z-index není nastaven a bude mít výchozí hodnotu - auto). První blok bude úplně dole (červený), a poslední - nejvýše (zelený): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
}

Результат:

Příklad

Změníme pořadí vrstev nastavením z-index. Červenému bloku - 3, modrému - 2, zelenému - 1. Pořadí vrstev se změní na opačné (nejvýše bude blok s z-index 3): 

html<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
css#div1 {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: red;
  z-index: 3;
}
#div2 {
  position: absolute;
  top: 60px;
  left: 60px;
  width: 50px;
  height: 50px;
  background: blue;
  z-index: 2;
}
#div3 {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 50px;
  height: 50px;
  background: green;
  z-index: 1;
}

Результат:

BackVlastnost positionNextPseudoprvek backdrop