Stapelkontext

Ein Stapelkontext ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse in Bezug auf den Benutzer, der angenommen wird, dass er auf den Ansichtsport oder die Webseite blickt. Der Stapelkontext bestimmt, wie Elemente entlang der z-Achse aufeinander geschichtet werden (denken Sie daran als die "Tiefendimension" auf Ihrem Bildschirm). Der Stapelkontext bestimmt die visuelle Reihenfolge, in der sich überschneidender Inhalt gerendert wird.

Elemente innerhalb eines Stapelkontextes werden unabhängig von Elementen außerhalb dieses Stapelkontextes gestapelt, was sicherstellt, dass Elemente in einem Stapelkontext die Stapelreihenfolge von Elementen in einem anderen Stapelkontext nicht stören. Jeder Stapelkontext ist vollständig unabhängig von seinen Geschwistern: Nur die Nachkommenelemente werden berücksichtigt, wenn das Stapeln verarbeitet wird.

Jeder Stapelkontext ist eigenständig. Nachdem der Inhalt eines Elements gestapelt wurde, wird das gesamte Element als eine einzige Einheit in der Stapelreihenfolge seines übergeordneten Stapelkontextes betrachtet.

Innerhalb eines Stapelkontextes werden Kind-Elemente gemäß den z-index-Werten aller Geschwister gestapelt. Die Stapelkontexte dieser verschachtelten Elemente haben nur in diesem übergeordneten Kontext Bedeutung. Stapelkontexte werden atomar als eine einzelne Einheit im übergeordneten Stapelkontext behandelt. Stapelkontexte können in anderen Stapelkontexten enthalten sein und schaffen zusammen eine Hierarchie von Stapelkontexten.

Die Hierarchie von Stapelkontexten ist eine Teilmenge der Hierarchie von HTML-Elementen, da nur bestimmte Elemente Stapelkontexte schaffen. Elemente, die keine eigenen Stapelkontexte schaffen, werden vom übergeordneten Stapelkontext übernommen.

Merkmale, die Stapelkontexte schaffen

Ein Stapelkontext wird überall im Dokument von jedem Element in den folgenden Szenarien gebildet:

Wurzelelement des Dokuments (<html>).
Element mit einem position-Wert absolute oder relative und einem z-index-Wert ungleich auto.
Element mit einem position-Wert fixed oder sticky.
Element mit einem container-type-Wert size oder inline-size eingestellt (siehe Container-Abfragen).
Element, das ein Flex-Element mit einem z-index-Wert ungleich auto ist.
Element, das ein Grid-Element mit einem z-index-Wert ungleich auto ist.
Element mit einem opacity-Wert kleiner als 1.
Element mit einem mix-blend-mode-Wert ungleich normal.
Element mit einer der folgenden Eigenschaften mit einem Wert ungleich none:
- transform
- scale
- rotate
- translate
- filter
- backdrop-filter
- perspective
- clip-path
- mask / mask-image / mask-border
Element mit dem isolation-Wert isolate.
Element mit einem will-change-Wert, der eine Eigenschaft angibt, die einen Stapelkontext auf einem nicht-initialen Wert schaffen würde.
Element mit einem contain-Wert von layout oder paint, oder einem zusammengesetzten Wert, der eine dieser Werte enthält (d.h. contain: strict, contain: content).
Element, das in die oberste Ebene und seine entsprechende ::backdrop platziert wird. Beispiele sind Fullscreen und Popover Elemente.
Element, das Stapelkontext-schaffende Eigenschaften (wie opacity) animiert hat unter Verwendung von @keyframes, mit animation-fill-mode auf forwards eingestellt.

Verschachtelte Stapelkontexte

Stapelkontexte können in anderen Stapelkontexten enthalten sein und sie können 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 werden. Innerhalb jedes Stapelkontextes werden Kind-Elemente gemäß den gleichen Regeln gestapelt, die im Abschnitt Verwendung von z-index erklärt sind. Wichtig ist, dass die z-index-Werte seiner Kind-Stapelkontexte nur innerhalb des übergeordneten Stapelkontextes Bedeutung haben. Stapelkontexte werden atomar als eine einzelne Einheit im übergeordneten Stapelkontext behandelt.

Um die Renderreihenfolge von gestapelten Elementen entlang der z-Achse herauszufinden, denken Sie an jeden Indexwert als eine Art "Versionsnummer", wobei Kind-Elemente unter ihren übergeordneten Elementen als Unterversionsnummern dargestellt werden.

Um zu demonstrieren, wie die Stapelreihenfolge jedes Elements an der Stapelreihenfolge ihrer Vorfahren-Stapelkontexte teilnimmt, betrachten wir eine Beispielseite mit sechs Containerelementen. Es gibt drei Geschwister-<article>-Elemente. Das letzte <article> enthält drei Geschwister-<section>-Elemente, wobei die <h1> und <code> dieses dritten Artikels zwischen den ersten und zweiten Geschwister-<section>-Elementen erscheinen.

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 Containerelement hat eine opacity von weniger als 1 (was einen Stapelkontext schafft) und eine position entweder relative oder absolute (was einen Stapelkontext schafft, wenn das Element auch einen z-index-Wert ungleich auto hat).

* {
  margin: 0;
}
html {
  padding: 20px;
  font:
    12px/20px "Arial",
    sans-serif;
}
h1 {
  font-size: 1.25em;
}
#container1,
#container2 {
  border: 1px dashed #669966;
  padding: 10px;
  background-color: #ccffcc;
}
#container1 {
  margin-bottom: 190px;
}
#container3 {
  border: 1px dashed #990000;
  background-color: #ffdddd;
  padding: 40px 20px 20px;
  width: 330px;
}
#container4 {
  border: 1px dashed #999966;
  background-color: #ffffcc;
  padding: 25px 10px 5px;
  margin-bottom: 15px;
}
#container5 {
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin-top: 15px;
  padding: 5px 10px;
}
#container6 {
  background-color: #ddddff;
  border: 1px dashed #000099;
  padding-left: 20px;
  padding-top: 125px;
  width: 150px;
  height: 125px;
}

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, Schriftarten, Ausrichtung und das Box-Modell wurden der Kürze halber verborgen.

Die Hierarchie von Stapelkontexten 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 Abschnittselemente vollständig innerhalb von ARTICLE #3 gelöst. Nachdem das Stapeln und Rendern innerhalb von ARTICLE #3 abgeschlossen ist, wird das gesamte ARTICLE #3-Element zum Stapeln im Wurzelelement im Hinblick auf seine Geschwister-<article>-Elemente weitergegeben.

Indem wir den z-index als "Versionsnummern" vergleichen, können wir sehen, 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 gültig ist, während der z-index von SECTION #4 (6) im Stapelkontext von ARTICLE #3 (z-index: 4) gültig ist. Daher ist 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 gehört (z-index: 4), das einen höheren z-index-Wert (2-0 ist kleiner als 4-1) hat.

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

In unserem Beispiel (sortiert nach der endgültigen Renderreihenfolge):

Root
- ARTICLE #2: (z-index: 2), was zu einer Renderreihenfolge von 2-0 führt
- ARTICLE #3: (z-index: 4), was zu einer Renderreihenfolge von 4-0 führt
  - SECTION #5: (z-index: 1), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von 4-1 führt
  - SECTION #6: (z-index: 3), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von 4-3 führt
  - SECTION #4: (z-index: 6), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von 4-6 führt
- ARTICLE #1: (z-index: 5), was zu einer Renderreihenfolge von 5-0 führt

Zusätzliche Beispiele

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden