Con la proprietà Z-inde si imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli.
Lo z-index stabilisce la disposizione degli elementi posizionati lungo l’asse perpendicolare allo schermo (per l'appunto l'asse Z).
Elementi con z-index maggiore vengono disposti sopra ad elementi con z-index minore.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1">Z-INDEX: 5</div>
<div class="box2">Z-INDEX: 10</div>
<div class="box3">Z-INDEX: 20</div>
</body>
</html>
.box1{
top: 100px;
left: 100px;
position: relative;
width: 100px;
height: 100px;
background: blue;
z-index: 5;
}
.box2{
top: 85px;
left: 85px;
position: relative;
width: 100px;
height: 100px;
background: red;
z-index: 10;
}
.box3{
top: 65px;
left: 65px;
position: relative;
width: 100px;
height: 100px;
background: yellow;
z-index: 20;
}
Gli oggetti posizionati in modo Relativo (position:relative;), Assoluto (position:absolute;) o Fisso (position:fixed;) possono occupare posizioni già occupate da altri oggetti;
Quando più blocchi si sovrappongono i blocchi di tipo relative, absolute e fixed si posizioneranno su di un livello superiore rispetto agli oggetti statici (position:static;);
La proprietà z-index non si applica ai blocchi posizionati in modo statico.
E' possibile in ogni caso gestire e quindi posizionare un blocco statico con la poroprietà z-index, dichiarandolo relativo e non specificandone alcun valore top, left, bottom o right.