KS Webdesign – Der Blog

Ich weiss nicht ob es euch schon mal so gegangen ist:

Eine schönes Design mit Dropdown-Navi und sich überlagernden Elementen hurtig entworfen. Frisch gecodet, im Browser angeschaut und festgestellt, das die Dropdown-Navi hinter dem nachfolgenden Element aufklappt und somit unbenutzbar ist. Außerdem überlagern sich andere Elemente nicht so, wie du es dir gedacht hast.

Was tun??

Na klar, position:absolute; und /oder position:relative; hier und dort eingesetzt.

Noch immer nicht??

Okay, also wird massiver positioniert. Die ersten z-index tauchen auf. Bei Elementen die auf jeden Fall vorne sein müssen gleich zur Sicherheit mal z-index:5000; vergeben, damit das auch sicher klappt.

Es geht trotzdem nicht??

Nun wird nach der Trial und Error-Methode wild herumpositioniert und mit z-index nur so um sich geworfen. Ein Hauch von Verzweiflung liegt in der Luft.

Was kann ich bloß tun, damit Wunsch und Ergebnis eins werden?

Stapelung ist kein leichtes Thema, schon gar nicht wenn man alle Aspekte inklusive der üblichen Extrawürste für den Internet Explorer verstehen will.

Für den Anfang reicht es die Grundlagen zu verstehen und dabei soll dir dieses kleine Tutorial helfen.

Hier findest du die stapelung 1_anfang.htm, die den Anfang des Tutorials darstellt.

Im Browser schaut es so aus:

Im normalen Textfluss ordnen sich die Elemente untereinander an. In der natürlichen Stapelreihenfolge befindet sich das zuletzt notierte Element im Quelltext am nächsten zum Betrachter (Z-Achse). Durch negative margin-Werte können optisch ursprünglich untereinander platzierte Elemente übereinander geschichtet werden.

CSS-Ergänzung:

Das Ergebnis:

Die Stapelungsreihenfolge auf der z-Achse (zum Betrachter hin) ist hierbei nun:
-background h1
-background p
-Text h1
-Text p

Text und Hintergrund werden also getrennt geschichtet.

CSS-Ergänzung:

Das Ergebnis:

Wird h1 relativ positioniert überlappt es das nach oben gezogene p , weil es durch die Positionierung ungleich position:static; aus dem Textfluss raus ist.

CSS-Ergänzung:

Das Ergebnis:

Wird p durch position:relative; auch aus dem Textfluss genommen, überlappt es wieder die Überschrift. Beide sind zwar ungleich position:static;, das p kommt im Quelltext aber erst nach der Überschrift, ist also nun wieder vorne.

Die Stapelungsreihenfolge auf der z-Achse ist nun folgende folgende:
-background h1
-Text h1
-background p
-Text p

CSS-Ergänzung:

Das Ergebnis:

Jetzt ist h1 wieder vorne.

Mit z-index kann die Reihenfolge von überlappenden Elementen auf der z-Achse bestimmt werden. z-index wirkt nur auf Elemente die ungleich position:static sind.

CSS-Ergänzung:

Das Ergebnis:

h1 ist noch immer vorne.

CSS-Ergänzung:

Das Ergebnis:

Jetzt ist p wieder vorne, weil es einen höheren Z-Index-Wert als
h1 hat.

Daraus kann man ableiten, das je höher der Z-index-Wert, desto näher wird das Element zum Betrachter hin angeordnet.

Wir wir aber gesehen haben ist die Definition von z-index oft nicht nötig, da durch einfache Positionierung ungleich position:static; die Stapelreihenfolge auf der z-Achse schon ausreichend geändert wird.

Das wars erstmal. Vieles habe ich der Einfachheit halber weggelassen. Wenn ihr euch ausgiebig dazu informieren wollt, kann ich euch nur das Buch Fortgeschrittene CSS-Techniken von Corina Rudel und Ingo Chao ans Herz legen.