z-index
Mit dem z-index property können wir die position von positionierten Elementen auf der z-Achse innerhalb ihres stacking contexts definieren.
z-index: auto | <integer> | inherit
Ohne z-index werden Elemente in dieser Reihenfolge gezeichnet:
Ohne z-index werden Elemente in dieser Reihenfolge gezeichnet:
Innerhalb der Gruppe jeweils in der Reihenfolge ihres Erscheinens im HTML Code.
Ein stacking-context ist eine Gruppierung von Elementen. Innerhalb eines stacking-context werden die Elemente anhand der genannten Regeln auf der z-Achse positioniert.
Das z-index property kann lediglich die Reihenfolge innerhalb eines stacking-contexts ändern.
Ein Element kann nie vor ein Element in einem nachfolgenden stacking-context gebracht werden.
Finde heraus, was dazu führt, dass ein Element einen eigenen stacking-context bildet.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Erstelle ein JSBin in dem du einige Elemente mittels z-index in ihrem stacking-context auf der z-Achse verschiebst.
Advanced: Forciere verschiedene stacking-contexte und experimentiere damit.