Kann mir jemand Stapelkontexte erklären?

Question

Ich hatte vor kurzem einen Fehler, bei dem ein Videoplayer innerhalb eines jQuery UI-Dialogs nicht anklickbar war. Das Problem habe ich schließlich behoben, indem ich das position:relative; überschrieben habe mit einem position:inherit;

Andere Lösungen für das Problem bestanden darin, das position:relative; vollständig zu entfernen oder den z-index der Klasse des Players auf etwas anderes als 1 festzulegen.

Wie ich gelesen habe, solche Änderungen sind ein Anzeichen für das Ändern des Stapelkontexts in dieser Situation, was mein Problem gelöst hat. Allerdings verstehe ich immer noch nicht wirklich, was in meiner Situation vor sich ging oder Stapelkontexte im Allgemeinen. Hat jemand sonst noch gute Beispiele/Vorschläge, was möglicherweise passiert ist?

wo das CSS für den Player ist

.player {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

Answer 1

Ich fand den von Phillip Walton verlinkten Artikel für mich verständlicher zu machen, wie Stapelkontexte funktionieren ... Ich habe diese Studiensafari im Rahmen der Fehlerbehebung eines eigenen Problems gemacht.

Beachten Sie, dass das pinkfarbene Quadrat mit z-index: 100; unter dem hellblauen Quadrat mit z-index: 1; erscheint, weil es durch einen Stapelkontext eingeschränkt ist, der auf .A durch das transform erstellt wurde.

Dieser jsbin ist etwas einfacher zu experimentieren als der SO-Inline-Code: https://jsbin.com/lataga/2/edit?css,output

div {
  width: 200px;
  height: 200px;
  padding: 1rem;
}

.A {
  position: absolute;
  background-color: red;

  /*
    Wenn hier ein transformiert hinzugefügt wird, wird ein
    neuer Stapelkontext für die Kinder von .A erstellt
    */
  transform: translateX(0);

  /*
    Mehrere andere Eigenschaften können die Erstellung eines Stapelkontexts auslösen,
    einschließlich Opazität < 1
    */
  /*    opacity: 0.99; */

  /*
    Wenn wir .A über .B anheben, steigen die Kinder mit ihm auf;
    entkommentieren Sie das folgende, um zu sehen:
    */
  /*    z-index: 3; */
}

.a {
  position: relative;

  /*
    Selbst ein viel höherer z-index kann .a nicht über .b heben, wenn
    es an einen niedrigeren Stapelkontext gebunden ist
    */
  z-index: 100;

  margin-left: 125px;
  background-color: pink;
}

.B {
  position: absolute;
  margin-top: 75px;
  /*    z-index: 2; */
  background-color: blue;
}

.b {
  margin-left: 50px;
  background-color: lightblue;

  /*
    Das Folgende ist nicht notwendig: Wenn kein z-index angegeben ist,
    wird er gemäß den Regeln der
    natürlichen Stapelreihenfolge berechnet...
    Ich gebe es nur explizit für den redaktionellen Effekt an.
    */
  z-index: 1;
}

  A: 1
  a: 1.100

  B: 2
  b: 2.1

---

Stapelkontext

• Die Positionierung und die Zuweisung eines z-index-Werts an ein HTML-Element erstellt einen Stapelkontext (ebenso wie die Zuweisung einer nicht vollständigen Opazität).
• Stapelkontexte können in anderen Stapelkontexten enthalten sein und zusammen eine Hierarchie von Stapelkontexten erstellen.
• Jeder Stapelkontext ist völlig unabhängig von seinen Geschwistern: Nur Nachfolgerelemente werden beim Stapeln berücksichtigt.
• Jeder Stapelkontext ist in sich geschlossen: Nachdem die Inhalte des Elements gestapelt sind, wird das gesamte Element in die Stapelordnung des übergeordneten Stapelkontexts einbezogen.

Hinweis: Die Hierarchie der Stapelkontexte ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelkontexte erstellen. Wir können sagen, dass Elemente, die keine eigenen Stapelkontexte erstellen, vom übergeordneten Stapelkontext assimiliert werden.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

---

Anders ausgedrückt

Jeder Stapelkontext hat ein einziges HTML-Element als Wurzelelement. Wenn ein neuer Stapelkontext auf einem Element gebildet wird, schränkt dieser Stapelkontext alle seine Kindelemente an einem bestimmten Ort in der Stapelreihenfolge ein. Das bedeutet, dass wenn ein Element in einem Stapelkontext am Ende der Stapelanordnung enthalten ist, es keine Möglichkeit gibt, es vor einem anderen Element in einem anderen Stapelkontext erscheinen zu lassen, das höher in der Stapelanordnung steht, auch nicht mit einem z-Index von einer Milliarde!

...

[...] Zusätzlich zur Opazität erzeugen auch mehrere neuere CSS-Eigenschaften Stapelkontexte. Dazu gehören: Transforms, Filter, CSS-Regions, Seitenmedien und möglicherweise andere. Im Allgemeinen scheint es eine Regel zu sein, dass eine CSS-Eigenschaft, die eine Darstellung in einem Offscreen-Kontext erfordert, einen neuen Stapelkontext erstellen muss.

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/