De stapelcontext

De stapelcontext (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.

De stapelcontext

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 stapelcontext vormen.

Een stapelcontext 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 stapelcontext 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 stapelcontext worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelcontexten alleen betekenis hebben binnen de stapelcontext van hun ouder element. Stapelcontexten worden atomair behandeld als een enkele eenheid in de ouders' stapelcontext.

Samengevat:

  • Stapelcontexten kunnen zich in andere stapelcontexten bevinden en samen een hiërarchie van stapelcontexten vormen.
  • Elke stapelcontext is volledig onafhankelijk van zijn broers en zussen: alleen kindelementen komen in aanmerking wanneer het stapelen wordt verwerkt.
  • Elke stapelcontext is op zichzelf staand: nadat de inhoud van het element is gestapeld, wordt het hele element bekeken in de stapelvolgorde van de bovenliggende stapelcontext.
Opmerking: de hiërarchie van stapelcontexten is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelcontexten maken. We kunnen zeggen dat elementen die hun eigen stapelcontexten niet creëren, worden geassimileerd door de ouders' stapelcontext.

Het voorbeeld

Example of stacking rules modified using z-index

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelcontext door hun position en z-index waardes. De hiërarchie van de stapelcontexten 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 stapelcontext, 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 stapelcontext van het rootelement, terwijl de z-index van DIV #4 (6) geldig is binnen de stapelcontext 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 stapelcontext.
  • 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;
}

Resultaat

Zie ook

 

Original Document Information