CSS -uitleg - Die z-indeks eiendom
Die z-indexeienskap spesifiseer die stapelvolgorde van 'n element.
Die z-indeks Eiendom
Wanneer elemente geposisioneer is, kan hulle ander elemente oorvleuel.
Die z-indexeienskap spesifiseer die stapelvolgorde van 'n element (watter element voor of agter die ander geplaas moet word).
'n Element kan 'n positiewe of negatiewe stapelvolgorde hê:
Dit is 'n opskrif
Omdat die prent 'n z-indeks van -1 het, sal dit agter die teks geplaas word.
Voorbeeld
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Let wel: z-index werk slegs op geposisioneerde elemente (posisie: absoluut, posisie: relatief, posisie: vas, of posisie: taai) en buig items
(elemente wat direkte kinders van vertoon is: buig elemente).
Nog 'n z-indeks voorbeeld
Voorbeeld
Hier sien ons dat 'n element met 'n groter stapelorde altyd bo 'n element met 'n laer stapelorde is:
<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>
Sonder z-indeks
As twee geposisioneerde elemente mekaar oorvleuel sonder 'n z-index
gespesifiseerde, sal die element wat laaste in die HTML-kode gedefinieer is bo-aan gewys word.
Voorbeeld
Dieselfde voorbeeld as hierbo, maar hier met geen z-indeks gespesifiseer nie:
<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>
CSS Eiendom
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |