Beispiel für Stacking-Kontext 3

Beschreibung

Dieses Beispiel zeigt Probleme, die auftreten, wenn mehrere positionierte Elemente in einer mehrstufigen HTML-Hierarchie gemischt werden und wenn z-index-Werte mit Klassenselektoren zugewiesen werden.

Das Beispiel hat ein dreistufiges hierarchisches Menü, das aus mehreren positionierten div-Elementen besteht. Zweitrangige und drittrangige div-Elemente erscheinen, wenn ein Benutzer mit der Maus über ihre Eltern fährt oder darauf klickt. Normalerweise wird diese Art von Menü entweder clientseitig oder serverseitig skriptgeneriert, sodass Stilregeln mit einem Klassenselektor statt mit einem ID-Selektor zugewiesen werden.

Wenn sich die drei Menüebenen teilweise überlappen, könnte die Verwaltung des Stapelings zum Problem werden.

Das erstklassige Menü ist relativ positioniert und erstellt einen Stapelkontext.

Das zweitrangige Menü ist absolut innerhalb des Elternelements positioniert. Um es über allen erstklassigen Menüs zu platzieren, wird die z-index-Eigenschaft verwendet. Das Problem ist, dass für jedes zweitrangige Menü ein Stapelkontext erstellt wird und jedes drittrangige Menü dem Kontext seines Elternteils angehört.

Ein drittrangiges Menü wird also unterhalb der folgenden zweitrangigen Menüs gestapelt, da alle zweitrangigen Menüs denselben z-index-Wert teilen und die Standardstapelregeln gelten.

Um die Situation besser zu verstehen, hier ist die Stapelkontext-Hierarchie (die drei Punkte "..." stehen für mehrfache Wiederholung der vorherigen Zeile):

  • Root-Stapelkontext

    • LEVEL #1

      • LEVEL #2 (z-index: 1)

        • LEVEL #3
        • …
        • LEVEL #3

      • LEVEL #2 (z-index: 1)

      • …

      • LEVEL #2 (z-index: 1)

    • LEVEL #1

    • …

    • LEVEL #1

Dieses Problem kann vermieden werden, indem die Überlappung zwischen Menüs verschiedener Ebenen entfernt wird, oder indem einzelne (und unterschiedliche) z-index-Werte zugewiesen werden, die über den ID-Selektor anstatt des Klassenselektors zugewiesen werden, oder durch Abflachung der HTML-Hierarchie.

Hinweis: Im Quellcode werden Sie sehen, dass zweitrangige und drittrangige Menüs aus mehreren div-Elementen bestehen, die in einem absolut positionierten Container enthalten sind. Dies ist nützlich, um alle auf einmal zu gruppieren und zu positionieren.

Beispiel

HTML

html
<div class="lev1">
  LEVEL #1

  <div id="container1">
    <div class="lev2">
      LEVEL #2 <br />z-index: 1;

      <div id="container2">
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
        <div class="lev3">LEVEL #3</div>
      </div>
    </div>

    <div class="lev2">LEVEL #2 <br />z-index: 1;</div>
    <div class="lev2">LEVEL #2 <br />z-index: 1;</div>
    <div class="lev2">LEVEL #2 <br />z-index: 1;</div>
  </div>
</div>

<div class="lev1">LEVEL #1</div>
<div class="lev1">LEVEL #1</div>
<div class="lev1">LEVEL #1</div>

CSS

css
div {
  opacity: 0.9;
}
.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

.lev2 {
  width: 200px;
  height: 60px;
  position: relative;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
}

Ergebnis

Siehe auch