Het stapelverband
Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.
Het stapelverband
In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.
Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:
- Het root element van het document (
<html>
). - Een element met een
position
waarde vanabsolute
ofrelative
en eenz-index
waarde anders danauto
. - Een element met een
position
waarde vanfixed
ofsticky
(sticky voor alle mobiele browsers, maar niet voor die van een verouderde desktop). - Een element dat een kind is van een flex (
flexbox
) container, met eenz-index
waarde anders danauto
. - Een element dat een kind is van een grid (
grid
) container, met eenz-index
waarde anders danauto
. - Een element met een
opacity
waarde anders dan1
(Zie ook de specificatie voor opacity). - Een element met een
mix-blend-mode
waarde anders dannormal
. - Een element met een van de volgende eigenschappen anders dan
none
: - Een element met een
isolation
waarde vanisolate
. - Een element met een
-webkit-overflow-scrolling
waarde vantouch
. - Een element met een
will-change
waarde die een eigenschap specificeert die een stapelverband op een niet-initiële waarde creeërt (zie dit bericht). - Een element met een
contain
waarde vanlayout
, ofpaint
, of een samengestelde waarde die een van beide bevat (bijv.contain: strict
,contain: content
).
Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.
Samengevat:
- Stapelverbanden kunnen zich in andere stapelverbanden bevinden en samen een hiërarchie van stapelverbanden vormen.
- Elke stapelverband is volledig onafhankelijk van zijn broers en zussen: alleen kindelementen komen in aanmerking wanneer het stapelen wordt verwerkt.
- Elke stapelverband is op zichzelf staand: nadat de inhoud van het element is gestapeld, wordt het hele element bekeken in de stapelvolgorde van de bovenliggende stapelverband.
Het voorbeeld
In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position
en z-index
waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:
- Root
- DIV #1
- DIV #2
- DIV #3
- DIV #4
- DIV #5
- DIV #6
Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>
.
Notes:
- DIV #4 wordt gerenderd onder DIV #1 omdat de z-index (5) van DIV #1 geldig is binnen de stapelverband van het rootelement, terwijl de z-index van DIV #4 (6) geldig is binnen de stapelverband van DIV #3 . DIV #4 staat dus onder DIV #1, omdat DIV #4 tot DIV #3 behoort, die een lagere Z-indexwaarde heeft.
- Om dezelfde reden wordt DIV #2 (z-index 2) gerenderd onder DIV #5 (z-index 1) omdat DIV #5 tot DIV #3 behoort, die een hogere Z-indexwaarde heeft.
- DIV #3's z-index is 4, maar deze waarde is onafhankelijk van de z-index van DIV #4, DIV #5 en DIV #6, omdat deze behoort tot een andere stapelverband.
- Een eenvoudige manier om de weergavevolgorde van gestapelde elementen langs de Z-as te achterhalen, is door het te beschouwen als een "versienummer" van soorten, waarbij onderliggende elementen onder de belangrijkste versienummers van hun bovenliggende niveau kleine versienummers zijn. Op deze manier kunnen we gemakkelijk zien hoe een element met een z-index van 1 (DIV #5) boven een element met een z-index van 2 (DIV #2) wordt gestapeld, en hoe een element met een z-index van 6 (DIV #4) is gestapeld onder een element met een z-index van 5 (DIV #1). In ons voorbeeld (gesorteerd op de uiteindelijke weergave volgorde):
- Root
- DIV #2 - z-index is 2
- DIV #3 - z-index is 4
- DIV #5 - z-index is 1, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4.1
- DIV #6 - z-index is 3, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,3
- DIV #4 - z-index is 6, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,6
- DIV #1 - z-index is 5
Voorbeeld
HTML
<div id="div1">
<h1>Division Element #1</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">
<h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<h1>Division Element #3</h1>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<h1>Division Element #5</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>
CSS
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4,
#div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
Original Document Information
Resultaat
Zie ook
- Stapelen zonder de z-index eigenschap: De stapelregels die gelden wanneer de z-index eigenschap niet is gedefinieerd.
- Stapelen met floated blokken: Hoe elementen met een float worden gestapeld.
- z-index gebruiken: How to use
z-index
to change default stacking. - Stapelverband voorbeeld 1: 2-level HTML hiërarchie,
z-index
op het laatste level - Stapelverband voorbeeld 2: 2-level HTML hiërarchie,
z-index
op alle levels - Stapelverband voorbeeld 3: 3-level HTML hiërarchie,
z-index
op de tweede level
- Author(s): Paolo Lombardi
- This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under the Creative Commons: Attribution-Sharealike license.
- Last Updated Date: July 9, 2005