Wartość auto jest domyślną wartością właściwości z-index.
Domyślnie każdy element HTML posiada ten sam poziom widoczności, który jest oznaczony liczbą 0.
Domyślnie, gdy oba nachodzące na siebie elementy HTML posiadają pozycję static lub oba nachodzące na siebie elementy HTML posiadają pozycję różną od pozycji static, wtedy bardziej na wierzchu (wraz ze swoimi elementami potomkami) jest ten element HTML, który został wyświetlony w późniejszej kolejności w oknie przeglądarki internetowej. W przeciwnym wypadku bardziej na wierzchu jest ten element HTML, który nie posiada pozycji static. Domyślnie im element HTML niżej w kodzie HTML, tym element HTML zostaje wyświetlony w późniejszej kolejności w oknie przeglądarki internetowej.
z-index:auto;
div#blok-1 (poziom widoczności 0)
div#blok-2 (poziom widoczności 0)
div#blok-3 (poziom widoczności 0)
Wszystkie przykładowe elementy "div" posiadają ten sam domyślny poziom widoczności.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
position:relative;
padding:1em;
font-size:1.3em;
}
#blok-1 {
width:350px;
background-color:red;
}
#blok-2 {
width:300px;
left:5px;
bottom:10px;
background-color:orange;
}
#blok-3 {
width:250px;
left:10px;
bottom:20px;
background-color:pink;
}
</style>
</head>
<body>
<div id="blok-1">div#blok-1 (poziom widoczności 0)</div>
<div id="blok-2">div#blok-2 (poziom widoczności 0)</div>
<div id="blok-3">div#blok-3 (poziom widoczności 0)</div>
</body>
</html>
Za pomocą właściwości z-index oraz dowolnej liczby całkowitej możemy określić poziom widoczności interesującego nas elementu HTML. Im większa liczba całkowita tym element HTML będzie posiadał większy poziom widoczności.
Każdy element HTML, który posiada właściwość "z-index" wraz z wartością różną od wartości auto tworzy nowy stos elementów HTML, czyli strukturę zbudowaną z siebie oraz ze swoich elementów potomków. Gdy niezależne od siebie stosy elementów HTML nachodzą na siebie, wtedy bardziej na wierzchu (wraz ze swoimi elementami potomkami) jest ten stos elementów HTML, który posiada wyższą wartość właściwości "z-index".
z-index:2;
div#blok-1 (poziom widoczności 0)
div#blok-2 (poziom widoczności 2)
div#blok-3 (poziom widoczności 1)
Przykładowy element "div#blok-2" tworzy nowy stos elementów HTML, którego poziom widoczności wynosi 2, ponieważ do wspomnianego elementu "div#blok-2" została dodana właściwość "z-index" wraz z wartością "2".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
position:relative;
padding:1em;
font-size:1.3em;
}
#blok-1 {
width:350px;
background-color:red;
}
#blok-2 {
z-index:2;
width:300px;
left:5px;
bottom:10px;
background-color:orange;
}
#blok-3 {
z-index:1;
width:250px;
left:10px;
bottom:20px;
background-color:pink;
}
</style>
</head>
<body>
<div id="blok-1">div#blok-1 (poziom widoczności 0)</div>
<div id="blok-2">div#blok-2 (poziom widoczności 2)</div>
<div id="blok-3">div#blok-3 (poziom widoczności 1)</div>
</body>
</html>
