Ominaisuus z-index
määrittää elementin pinojärjestys.
Kun elementit on sijoitettu, ne voivat mennä päällekkäin muiden elementtien kanssa.
Ominaisuus z-index
määrittää elementin pinojärjestyksen (mikä elementti tulee sijoittaa muiden eteen tai taakse).
Elementillä voi olla positiivinen tai negatiivinen pinojärjestys:
Because the image has a z-index of -1, it will be placed behind the text.
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Huomaa: z-index
toimii vain sijoitetuissa elementeissä (sijainti: absoluuttinen, sijainti: suhteellinen, sijainti: kiinteä tai sijainti: tahmea) ja joustavia kohteita (elementit, jotka ovat näytön suoria lapsia: joustavat elementit).
Tässä näemme, että elementti, jolla on suurempi pinojärjestys, on aina pienempien pinojärjestyksen omaavan elementin yläpuolella:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3; /* gray box will be above both green and black box */
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2; /* green box will be above black box */
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<h1>Z-index Example</h1>
<p>An element with greater stack order is always above an element with a lower stack order.</p>
<div class="container">
<div class="black-box">Black box (z-index: 1)</div>
<div class="gray-box">Gray box (z-index: 3)</div>
<div class="green-box">Green box (z-index: 2)</div>
</div>
</body>
</html>
Jos kaksi sijoitettua elementtiä menevät päällekkäin ilman z-indeksiä
määritettynä, HTML-koodin viimeisenä määritetty elementti näkyy ylhäällä.
Sama esimerkki kuin yllä, mutta tässä ilman z-indeksiä:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<h1>Overlapping elements</h1>
<p>If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>
<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Asettaa elementin pinojärjestyksen