1. Web
  2. CSS
  3. Guides
  4. Positioned layout
  5. Stacking-Kontext

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Stacking-Kontext

Ein Stacking-Kontext ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, der angenommen wird, dem Viewport oder der Webseite gegenüberzustehen. Der Stacking-Kontext bestimmt, wie Elemente entlang der z-Achse übereinander geschichtet werden (denken Sie daran als die "Tiefen"-Dimension auf Ihrem Bildschirm). Der Stacking-Kontext bestimmt die visuelle Reihenfolge, in der überlappende Inhalte gerendert werden.

Elemente innerhalb eines Stacking-Kontexts werden unabhängig von Elementen außerhalb dieses Stacking-Kontextes gestapelt, was sicherstellt, dass Elemente in einem Stacking-Kontext die Stapelreihenfolge von Elementen in einem anderen nicht stören. Jeder Stacking-Kontext ist völlig unabhängig von seinen Geschwistern: Nur nachfolgende Elemente werden berücksichtigt, wenn eine Stapelung verarbeitet wird.

Jeder Stacking-Kontext ist in sich geschlossen. Nachdem die Inhalte eines Elements gestapelt wurden, wird das gesamte Element als eine einzige Einheit in der Stapelreihenfolge des übergeordneten Stacking-Kontexts betrachtet.

Innerhalb eines Stacking-Kontexts werden Kindelemente gemäß den z-index-Werten aller Geschwister gestapelt. Die Stacking-Kontexte dieser verschachtelten Elemente haben nur innerhalb dieses Elternteils Bedeutung. Stacking-Kontexte werden atomar als eine einzige Einheit im übergeordneten Stacking-Kontext behandelt. Stacking-Kontexte können in andere Stacking-Kontexte eingebettet sein und zusammen eine Hierarchie von Stacking-Kontexten bilden.

Die Hierarchie der Stacking-Kontexte ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stacking-Kontexte erstellen. Elemente, die keinen eigenen Stacking-Kontext erstellen, werden vom übergeordneten Stacking-Kontext assimilated.

Merkmale, die Stacking-Kontexte erstellen

Ein Stacking-Kontext wird überall im Dokument durch ein beliebiges Element in den folgenden Szenarien erstellt:

Verschachtelte Stacking-Kontexte

Stacking-Kontexte können in andere Stacking-Kontexte eingebettet sein, und sie können zusammen eine Hierarchie von Stacking-Kontexten erstellen.

Das Wurzelelement eines Dokuments ist ein Stacking-Kontext, der in den meisten Fällen verschachtelte Stacking-Kontexte enthält, von denen viele zusätzliche Stacking-Kontexte enthalten. Innerhalb jedes Stacking-Kontextes werden Kindelemente gemäß den gleichen Regeln gestapelt, die in Verwendung von z-index erklärt werden. Wichtig ist, dass die z-index-Werte seiner Kinder-Stapelungskontexte nur innerhalb des Eltern-Stapelungskontextes Bedeutung haben. Stacking-Kontexte werden atomar als eine einzige Einheit im Eltern-Stapelungskontext behandelt.

Um die Renderreihenfolge der gestapelten Elemente entlang der z-Achse herauszufinden, können sie sich jeden Indexwert als eine Art "Versionsnummer" vorstellen, wobei die Kindelemente nicht bedeutsame Versionsnummern unterhalb der übergeordneten Hauptversionsnummer repräsentieren.

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

-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 Container-Element hat eine opacity von weniger als 1 (was einen Stacking-Kontext erzeugt) und eine position von entweder relative oder absolute (was einen Stacking-Kontext erzeugt, wenn das Element auch einen z-index-Wert hat, der nicht auto ist).

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 ausgeblendet.

Die Hierarchie der Stacking-Kontexte im obigen Beispiel ist wie folgt:

Root
│
├── ARTICLE #1
├── ARTICLE #2
└── ARTICLE #3
  │
  ├── SECTION #4
  ├── 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. Sobald das Stapeln und Rendern innerhalb von ARTICLE #3 abgeschlossen ist, wird das gesamte ARTICLE #3-Element zur Stapelung im Wurzelelement hinsichtlich seiner Geschwister <article>-Elemente weitergereicht.

Durch den Vergleich des z-index als "Versionsnummern" 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 ist und wie ein Element mit einem z-index von 6 (SECTION #4) unter einem Element mit einem z-index von 5 (ARTICLE #1) gestapelt ist. SECTION #4 wird unter ARTICLE #1 gerendert, weil der z-index von ARTICLE #1 (5) im Stacking-Kontext des Wurzelelements gültig ist, während der z-index von SECTION #4 (6) im Stacking-Kontext von ARTICLE #3 (z-index: 4) gültig ist. SECTION #4 wird also unter ARTICLE #1 gerendert, da SECTION #4 zu ARTICLE #3 gehört, das einen niedrigeren z-index-Wert hat (4-6 ist kleiner als 5-0).

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 hat (2-0 ist kleiner als 4-1).

Der z-index von ARTICLE #3 ist 4, aber dieser Wert ist unabhängig von dem z-index der drei darin verschachtelten Abschnitte, weil sie zu einem anderen Stacking-Kontext 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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden