Stapelkontext

EinStapelkontext 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äß denz-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, werdenvom ü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 einemposition-Wertabsolute oderrelative und einemz-index-Wert ungleichauto.
Element mit einemposition-Wertfixed odersticky.
Element mit einemcontainer-type-Wertsize oderinline-size eingestellt (sieheContainer-Abfragen).
Element, das einFlex-Element mit einemz-index-Wert ungleichauto ist.
Element, das einGrid-Element mit einemz-index-Wert ungleichauto ist.
Element mit einemopacity-Wert kleiner als1.
Element mit einemmix-blend-mode-Wert ungleichnormal.
Element mit einer der folgenden Eigenschaften mit einem Wert ungleichnone:
Element mit demisolation-Wertisolate.
Element mit einemwill-change-Wert, der eine Eigenschaft angibt, die einen Stapelkontext auf einem nicht-initialen Wert schaffen würde.
Element mit einemcontain-Wert vonlayout oderpaint, oder einem zusammengesetzten Wert, der eine dieser Werte enthält (d.h.contain: strict,contain: content).
Element, das in dieoberste Ebene und seine entsprechende::backdrop platziert wird. Beispiele sindFullscreen undPopover Elemente.
Element, das Stapelkontext-schaffende Eigenschaften (wieopacity) animiert hat unter Verwendung von@keyframes, mitanimation-fill-mode aufforwards 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 AbschnittVerwendung vonz-index erklärt sind. Wichtig ist, dass diez-index-Werte seiner Kind-Stapelkontexte nur innerhalb des übergeordneten Stapelkontextes Bedeutung haben. Stapelkontexte werden atomar als eine einzelne Einheit im übergeordneten Stapelkontext behandelt.

Um dieRenderreihenfolge 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>  <h1>Article element #1</h1>  <code>    position: relative;<br />    z-index: 5;  </code></article><article>  <h1>Article Element #2</h1>  <code>    position: relative;<br />    z-index: 2;  </code></article><article>  <section>    <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>    <h1>Section Element #5</h1>    <code>      position: relative;<br />      z-index: 1;    </code>  </section>  <section>    <h1>Section Element #6</h1>    <code>      position: absolute;<br />      z-index: 3;    </code>  </section></article>

Jedes Containerelement hat eineopacity von weniger als1 (was einen Stapelkontext schafft) und eineposition entwederrelative oderabsolute (was einen Stapelkontext schafft, wenn das Element auch einenz-index-Wert ungleichauto 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 dasBox-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 denz-index als "Versionsnummern" vergleichen, können wir sehen, wie ein Element mit einemz-index von1 (SECTION #5) über einem Element mit einemz-index von2 (ARTICLE #2) gestapelt wird, und wie ein Element mit einemz-index von6 (SECTION #4) unter einem Element mit einemz-index von5 (ARTICLE #1) gestapelt wird.SECTION #4 wird unter ARTICLE #1 gerendert, weil derz-index von ARTICLE #1 (5) im Stapelkontext des Wurzelelements gültig ist, während derz-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 niedrigerenz-index-Wert (4-6 ist kleiner als5-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öherenz-index-Wert (2-0 ist kleiner als4-1) hat.

Derz-index von ARTICLE #3 ist4, aber dieser Wert ist unabhängig vomz-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 von2-0 führt
- ARTICLE #3: (z-index: 4), was zu einer Renderreihenfolge von4-0 führt
  - SECTION #5: (z-index: 1), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von4-1 führt
  - SECTION #6: (z-index: 3), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von4-3 führt
  - SECTION #4: (z-index: 6), gestapelt unter einem Element (z-index: 4), was zu einer Renderreihenfolge von4-6 führt
- ARTICLE #1: (z-index: 5), was zu einer Renderreihenfolge von5-0 führt

Zusätzliche Beispiele

Zusätzliche Beispiele umfassen eine2-stufige Hierarchie mitz-index auf der letzten Ebene, eine2-stufige HTML-Hierarchie,z-index auf allen Ebenen, und eine3-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.