CSS Lagen
De eigenschap z-index kan worden gebruikt om lagen te creëren.CSS z-index eigenschap
Wanneer elementen zijn gepositioneerd, kunnen ze andere elementen overlappen. De eigenschap z-index specificeert de stapelvolgorde van een element dit betekent welk element voor of achter de andere moet worden geplaatst. De normale volgorde waarin elkaar overlappende elementen worden weergegeven, is van onder naar boven, in de volgorde waarin ze in een document verschijnen.
Voorbeeld van z-index
Omdat de afbeelding een z-index van -1 heeft, wordt deze achter de tekst geplaatst.
Voorbeeld:
p, h2 {
color: white;
font-weight: bold;
}
img {
width: 100%;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
 |
De z-index eigenschap kan worden gebruikt om een andere volgorde te specificeren. |
Elementen in lagen stapelen met behulp van z-index
Gewoonlijk worden HTML-pagina's als tweedimensionaal beschouwd, omdat tekst, afbeeldingen en andere elementen zonder overlapping op de pagina zijn gerangschikt. De positie van elke laag wordt uitgedrukt als een geheel getal dat de stapelvolgorde voor weergave weergeeft. Een element met een grotere z-index overlapt een element met een lagere. De z-index eigenschap kan je helpen om complexere webpagina-indelingen te maken.
Voorbeeld:
.container {
position: relative;
}
.box {
width: 150px;
height: 150px;
opacity: 0.9;
position: absolute;
}
.rood {
background: #ff0000;
z-index: 1;
}
.groen {
top: 30px;
left: 30px;
background: #00ff00;
z-index: 2;
}
.blauw {
top: 60px;
left: 60px;
background: #0000ff;
z-index: 3;
}
