Stapelkontext

Stapelkontext ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Viewport oder der Webseite zugewandt ist. Der Stapelkontext bestimmt, wie Elemente entlang der z-Achse übereinander geschichtet werden (denken Sie daran als die "Tiefendimension" auf Ihrem Bildschirm). Der Stapelkontext bestimmt die visuelle Reihenfolge, wie sich überlappende Inhalte dargestellt werden.

Elemente innerhalb eines Stapelkontexts werden unabhängig von Elementen außerhalb dieses Stapelkontexts gestapelt, um sicherzustellen, dass Elemente in einem Stapelkontext nicht die Stapelreihenfolge von Elementen in einem anderen stören. Jeder Stapelkontext ist vollständig unabhängig von seinen Geschwistern: Nur Nachkommenelemente werden beim Stapelvorgang berücksichtigt.

Jeder Stapelkontext ist in sich geschlossen. Nachdem der Inhalt eines Elements gestapelt wurde, wird das gesamte Element als eine einzelne Einheit in der Stapelreihenfolge seines übergeordneten Stapelkontexts betrachtet.

Innerhalb eines Stapelkontexts werden Kindelemente entsprechend den z-index Werten aller Geschwister gestapelt. Die Stapelkontexte dieser verschachtelten Elemente haben nur in diesem übergeordneten Element eine Bedeutung. Stapelkontexte werden atomar als eine Einheit im übergeordneten Stapelkontext behandelt. Stapelkontexte können in anderen Stapelkontexten enthalten sein und bilden zusammen eine Hierarchie der Stapelkontexte.

Die Hierarchie der Stapelkontexte ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelkontexte erstellen. Elemente, die keinen eigenen Stapelkontext erstellen, werden vom übergeordneten Stapelkontext assimiliert.

Merkmale, die Stapelkontexte erstellen

Ein Stapelkontext wird an jeder Stelle im Dokument durch ein beliebiges Element in folgenden Szenarien gebildet:

Verschachtelte Stapelkontexte

Stapelkontexte können in anderen Stapelkontexten enthalten sein und zusammen eine Hierarchie von Stapelkontexten bilden.

Das Wurzelelement eines Dokuments ist ein Stapelkontext, der in den meisten Fällen verschachtelte Stapelkontexte enthält, von denen viele zusätzliche Stapelkontexte enthalten. Innerhalb jedes Stapelkontexts werden Kindelemente nach den gleichen in Verwendung von z-index erläuterten Regeln gestapelt. Wichtig ist, dass die z-index Werte seiner Kindelemente nur innerhalb des Stapelkontexts des Elternteils Bedeutung haben. Stapelkontexte werden atomar als eine Einheit im Stapelkontext des übergeordneten Elements behandelt.

Um die Render-Reihenfolge gestapelter Elemente entlang der z-Achse zu ermitteln, können Sie jeden Indexwert als eine Art "Versionsnummer" betrachten, bei der Kindelemente kleinere Versionsnummern unterhalb der Hauptversionsnummer ihres übergeordneten Elements darstellen.

Um zu demonstrieren, wie die Stapelreihenfolge jedes Elements an der Stapelreihenfolge ihrer übergeordneten Stapelkontexte beteiligt ist, betrachten wir eine Beispielseite mit sechs Container-Elementen. Es gibt drei benachbarte <article> Elemente. Der letzte <article> enthält drei benachbarte <section> Elemente, wobei das <h1> und <code> dieses dritten Artikels zwischen dem ersten und zweiten benachbarten <section> Element erscheint.

html
<article id="container1">
  <h1>Article element #1</h1>
  <code>
    position: relative;<br />
    z-index: 5;
  </code>
</article>

<article id="container2">
  <h1>Article Element #2</h1>
  <code>
    position: relative;<br />
    z-index: 2;
  </code>
</article>

<article id="container3">
  <section id="container4">
    <h1>Section Element #4</h1>
    <code>
      position: relative;<br />
      z-index: 6;
    </code>
  </section>

  <h1>Article Element #3</h1>
  <code>
    position: absolute;<br />
    z-index: 4;
  </code>

  <section id="container5">
    <h1>Section Element #5</h1>
    <code>
      position: relative;<br />
      z-index: 1;
    </code>
  </section>

  <section id="container6">
    <h1>Section Element #6</h1>
    <code>
      position: absolute;<br />
      z-index: 3;
    </code>
  </section>
</article>

Jedes Container-Element hat eine opacity von weniger als 1 und eine position von entweder relative oder absolute gesetzt. Diese Eigenschaft-Werte-Paare erstellen einen Stapelkontext, wenn das Element einen z-index Wert ungleich auto hat.

css
section,
article {
  opacity: 0.85;
  position: relative;
}
#container1 {
  z-index: 5;
}
#container2 {
  z-index: 2;
}
#container3 {
  z-index: 4;
  position: absolute;
  top: 40px;
  left: 180px;
}
#container4 {
  z-index: 6;
}
#container5 {
  z-index: 1;
}
#container6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
}

Die CSS-Eigenschaften für Farben, Schriften, Ausrichtung und Box-Modell wurden der Kürze halber ausgeblendet.

Die Hierarchie der Stapelkontexte im obigen Beispiel ist wie folgt:

Root
│
├── ARTICLE #1
├── ARTICLE #2
└── ARTICLE #3
  │
  ├── SECTION #4
  ├────  ARTICLE #3 content
  ├── SECTION #5
  └── SECTION #6

Die drei <section> Elemente sind Kinder von ARTICLE #3. Daher wird das Stapeln der Sektionselemente vollständig innerhalb von ARTICLE #3 gelöst. Sobald das Stapeln und Rendern innerhalb von ARTICLE #3 abgeschlossen ist, wird das gesamte ARTICLE #3 Element zur Stapelung im Wurzelelement im Hinblick auf seine benachbarten <article> Elemente übergeben.

Indem wir den z-index als "Versionsnummern" vergleichen, können wir erkennen, wie ein Element mit einem z-index von 1 (SECTION #5) über einem Element mit einem z-index von 2 (ARTICLE #2) gestapelt wird und wie ein Element mit einem z-index von 6 (SECTION #4) unter einem Element mit einem z-index von 5 (ARTICLE #1) gestapelt wird. SECTION #4 wird unter ARTICLE #1 gerendert, weil der z-index von ARTICLE #1 (5) im Stapelkontext des Wurzelelements, während der z-index von SECTION #4 (6) im Stapelkontext von ARTICLE #3 (z-index: 4) gültig ist. Daher liegt SECTION #4 unter ARTICLE #1, weil SECTION #4 zu ARTICLE #3 gehört, das einen niedrigeren z-index Wert (4-6 ist kleiner als 5-0) hat.

Aus dem gleichen Grund wird ARTICLE #2 (z-index: 2) unter SECTION #5 (z-index: 1) gerendert, weil SECTION #5 zu ARTICLE #3 (z-index: 4) gehört, das einen höheren z-index Wert (2-0 ist kleiner als 4-1) hat.

ARTICLE #3 hat einen z-index von 4, aber dieser Wert ist unabhängig vom z-index der drei darin verschachtelten Sektionen, weil sie zu einem anderen Stapelkontext gehören.

In unserem Beispiel (sortiert nach der endgültigen Render-Reihenfolge):

  • Wurzel

    • ARTICLE #2: (z-index: 2), was zu einer Render-Reihenfolge von 2-0 führt

    • ARTICLE #3: (z-index: 4), was zu einer Render-Reihenfolge von 4-0 führt

      • SECTION #5: (z-index: 1), unter einem Element gestapelt (z-index: 4), was zu einer Render-Reihenfolge von 4-1 führt
      • SECTION #6: (z-index: 3), unter einem Element gestapelt (z-index: 4), was zu einer Render-Reihenfolge von 4-3 führt
      • SECTION #4: (z-index: 6), unter einem Element gestapelt (z-index: 4), was zu einer Render-Reihenfolge von 4-6 führt

    • ARTICLE #1: (z-index: 5), was zu einer Render-Reihenfolge von 5-0 führt

Zusätzliche Beispiele

Zusätzliche Beispiele beinhalten eine 2-Stufen-Hierarchie mit z-index auf der letzten Stufe, eine 2-stufige HTML-Hierarchie, z-index auf allen Ebenen, und eine 3-stufige HTML-Hierarchie, z-index auf der zweiten Stufe.

Siehe auch