Das ist die Überschrift
In den Beispielen mit der relativen und absoluten Positionierung zuvor haben Sie bereits gesehen,
dass es zu Überlappungen der Elemente kommen kann, wenn Sie Elemente absolut
(oder auch relativ oder fixiert) in ihrer Position verändern oder aus dem Dokumentenfluss
herausnehmen. Sie sehen das nochmals in Abbildung 12.15.
Abbildung 12.15 Bei relativer oder absoluter (oder auch fixierter) Positionierung müssen
Sie damit rechnen, dass sich Elemente überlagern.
Standardmäßig liegen die relativen, absoluten und fixierten Elemente in der Reihenfolge
aufeinandergestapelt, wie sie im Dokumentenfluss des HTML-Dokuments notiert wurden.
© Rheinwerk Verlag, Bonn 2021
467
12.2 Übereinanderstapeln regeln mit »z-index«
Das zuletzt notierte Element liegt oben. Dieses Verhalten können Sie mit der CSS-Eigenschaft
z-index verändern. Die CSS-Eigenschaft z-index ist quasi die dritte Achse bei einem Element.
Bisher haben Sie sich nur um die horizontale und vertikale Position gekümmert (also die
x- und y-Achse). Die dritte Dimension ist die z-Achse, auf der die Elemente übereinanderliegen,
wie Abbildung 12.16 deutlicher zeigen soll.
Abbildung 12.16 Elemente, deren CSS-Eigenschaft »position« vom Standardwert »static« abweicht,
enthalten neben der x- und y-Achse noch eine z-Achse.
Die Verwendung der CSS-Eigenschaft z-index ist denkbar einfach. Je höher der notierte Wert
von z-index, desto weiter oben liegt das Element im Stapel. Das Element mit dem höchsten
z-index-Wert liegt somit ganz oben und das Element mit dem niedrigsten z-index-Wert ganz
unten. Bei gleichen Werten für z-index liegt das Element oben, das zuletzt im Dokumentenfluss
notiert wurde.
Bezogen auf Abbildung 12.15 sah der CSS-Code noch wie folgt aus:
...
.article01 {
width: 300px;
padding: 10px;
border: 1px solid black;
background-color: sandybrown;
}
.article02 {
position: relative;
top: -75px;
left: 100px;
width: 300px;
padding: 10px;
z
y
x
Persönliches Exemplar für Matthias Pester
468
12 CSS-Positionierung
border: 1px solid black;
background-color: bisque;
}
...
Listing 12.12 /Beispiele/Kapitel012/12_2/css/style.css
...
Artikel 1
Lorem ipsum dolor ...
Artikel 2
Lorem ipsum dolor ...
...
Listing 12.13 /Beispiele/Kapitel012/12_2/index.html
In diesem Beispiel hat das zweite article-Element, das mit dem Klassenselektor article02 relativ
verschoben wurde, das erste article-Element überlagert.
Wollen Sie jetzt, dass das erste article-Element über das zweite article-Element gelegt wird,
können Sie die CSS-Eigenschaft z-index im Klassenselektor article02 verwenden. Wenn Sie
im Klassenselektor article02 die CSS-Eigenschaft z-index mit einem beliebigen positiven
Wert verwendet haben, der niedriger als der z-index-Wert im Klassenselektor article01 ist,
werden Sie zunächst verdutzt feststellen, dass sich nichts geändert hat. Das liegt daran, dass
die Stapelung bzw. die Verwendung der CSS-Eigenschaft z-index keine Wirkung auf statisch
positionierte Elemente hat, wie es im Beispiel mit dem ersten article-Element und dem
Klassenselektor article01 der Fall ist.
In unserem Fall können Sie das Problem lösen, indem Sie den ersten Artikel mit der CSSEigenschaft
position: relative; versehen und keinerlei Werte für die Positionierung verwenden.
Das Element bleibt dabei wie gehabt an Ort und Stelle. Im umgebenden Element gilt
das Element aber dadurch als positioniert. Hierzu also die Lösung des Problems, mit der
das erste article-Element mithilfe der CSS-Eigenschaft z-index das zweite article-Element
überlagert:
...
.article01 {
position: relative;
width: 300px;
padding: 10px;
border: 1px solid black;
© Rheinwerk Verlag, Bonn 2021
469
12.2 Übereinanderstapeln regeln mit »z-index«
background-color: orange;
z-index: 2;
}
.article02 {
position: relative;
top: -75px;
left: 100px;
width: 300px;
padding: 10px;
border: 1px solid black;
background-color: yellow;
z-index: 1;
}
...
Listing 12.14 /Beispiele/Kapitel012/12_2/css/style2.css
...
Artikel 1
Lorem ipsum dolor ...
Artikel 2
Lorem ipsum dolor ...
...
Listing 12.15 /Beispiele/Kapitel012/12_2/index2.html
In Abbildung 12.17 (verglichen mit Abbildung 12.15) können Sie sehen, wie das erste article-
Element über das zweite article-Element im Stapel gelegt wird. Zu verdanken ist dies dem
höheren z-index-Wert (hier: 2), der im ersten article-Element mit dem Klassenselektor
article01 verwendet wird. Den zweiten z-index-Wert (hier: 1) im Klassenselektor article02
hätten Sie nicht angeben müssen. Aber Sie können hier gerne den Wert der CSS-Eigenschaft
z-index im Klassenselektor article02 auf 3 erhöhen, um zu sehen, dass dann wieder das zweite
article-Element über das erste gelegt wird.
geht nicht
geht
geht
