Výuka CSS

Přechody Pozice Z-index Border Třídy

Z-index

Popis

Vlastnost z-index určuje pořadí zásobníku prvku.

Prvek s vyšším pořadím zásobníku je vždy před prvkem s nižším pořadím zásobníku.

Poznámka: z-index funguje pouze na umístěných prvcích (position: absolute, position: relative, position: fixed nebo position: sticky) a flex prvcích (elementy, které jsou přímými podřízenými elementy display:flex).

Poznámka: Pokud se dva umístěné prvky překrývají, aniž by byl zadán z-index, prvek umístěný jako poslední v kódu HTML se zobrazí nahoře.

Zápis v CSS (a HTML):

CSS

.container {
position: relative;
width: 300px;
height: 300px;
display: flex;
}

.box {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}

.box1 {
background-color: lightcoral;
z-index: 1;
top: 50px;
left: 50px;
color: black;
border: 3px solid black;
}

.box2 {
background-color: lightgreen;
z-index: 2;
top: 100px;
left: 100px;
color: black;
border: 3px solid black;
}

.box3 {
background-color: lightblue;
z-index: 3;
top: 150px;
left: 150px;
color: black;
border: 3px solid black;
}