CSS z-index stacking context

[Hendoul]

Hi

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

Ich habe mir dieses Video zu Gemüte geführt.

Codepen dazu:
https://codepen.io/kevinpowell/pen/GdRYLg

Jetzt habe ich mich gefragt was man machen müsste um die purple box-three unter die grüne box-two zu kriegen?
Einfach z-index von box-two erhöhen bringt nichts.
Und warum schiebt sich purple überhaupt über green?

Geht das nur in dem man box-three aus box-two entfernt und auch auf der selben höhe wie die anderen boxen definiert, also so?

  <div class="box box-one"></div>
  <div class="box box-two"></div>
  <div class="box box-three"></div>

 

[floq0r]

Solange box-three ein child von box-two ist wirst du sie nie "hinter box-two" bekommen. Die Anführungszeichen deshalb weil sie nicht dahinter sein kann solange sie drin ist.
Wenn du ein weiteres child in box-two erstellst und das statt dem parent rot formatierst hast du wieder andere Gegebenheiten.

 

[failormooNN]

Ich verstehe nicht, wieso Du die Boxen nicht einfach absolut positionierst.
Macht mMn. viel mehr Sinn, als sich das mit Minus-Margins zu erzwingen.

 

[netzgestaltung]

z-index wirkt nicht, wenn die position auf static(default) ist, ohne weiterer positionierung wäre daher position:relative; nötig, wenn alle auf einer ebene im html liegen.

 

[Hendoul]

Ich verstehe nicht, wieso Du die Boxen nicht einfach absolut positionierst.
Macht mMn. viel mehr Sinn, als sich das mit Minus-Margins zu erzwingen.

Das ist doch bloss ein Beispiel das im Video zu Demonstrationszwecken benutzt wird?

z-index wirkt nicht, wenn die position auf static(default) ist, ohne weiterer positionierung wäre daher position:relative; nötig, wenn alle auf einer ebene im html liegen.

Dessen bin ich mir bewusst, weiss aber nicht genau was du mir damit in Bezug auf meine Fragen mitteilen möchtest 🤷‍♂️

 

[failormooNN]

@Hendoul Ach so, ich dachte, der Link zu CodePen ist von Dir und Du hast dich dort ausprobiert.

 

[Janush]

Es gibt eine Möglichkeit ... ob die schön ist, muss jeder für sich entscheiden :-)

main-box bekommt einen z-index von 0
box-two bekommt keinen z-index (also Zeile löschen)
box-three bekommt einen z-index von -1