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 van absolute of relative en een z-index waarde anders dan auto.
  • Een element met een position waarde van fixed of sticky (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 een z-index waarde anders dan auto.
  • Een element dat een kind is van een grid (grid) container, met een z-index waarde anders dan auto.
  • Een element met een opacity waarde anders dan 1 (Zie ook de specificatie voor opacity).
  • Een element met een mix-blend-mode waarde anders dan normal.
  • Een element met een van de volgende eigenschappen anders dan none:
  • Een element met een isolation waarde van isolate.
  • Een element met een -webkit-overflow-scrolling waarde van touch.
  • 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 van layout, of paint, 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.
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.

Het voorbeeld

Example of stacking rules modified using z-index

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