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

stacking ohne z-index

Ohne z-index werden Elemente in dieser Reihenfolge gezeichnet:

1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Descendant positioned elements, in order of appearance (in HTML)

stacking ohne

z-index mit float

Ohne z-index werden Elemente in dieser Reihenfolge gezeichnet:

1. root Element
2. nicht positionierte block Elemente
3. nicht positionierte floatende Elemente
4. nicht positionierte inline Elemente
5. positionierte Elemente

Innerhalb der Gruppe jeweils in der Reihenfolge ihres Erscheinens im HTML Code.

stacking-context

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.

Aufgabe

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

Aufgabe

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.