Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Reihenfolge der Elemente beeinflussen

29,95
Die z-Index-Eigenschaft ermöglicht es, die Reihenfolge sämtlicher HTML-Elemente bei der Positionierung auf der z-Achse innerhalb einer Website zu beeinflussen.

Die Eigenschaft "position" kann also viele verschiedene Werte haben. Wir rechnen dem Normal Flow zu die beiden Eigenschaften "position: static" und "position: relative", weil sie sich beide am normalen Fluss orientieren. Und als absolute Positionierung gelten die beiden anderen, nämlich "position: absolute" und "position: fixed", weil sie mit dem Fluss, mit dem Flow nichts mehr zu tun haben. Als positionierte Elemente gelten "position: relative", "position: absolute" und "position: fixed". Es gibt jetzt bei der Positionierung noch einige Besonderheiten bei der Reihenfolge der Elemente auf der z-Achse, also von vorne nach hinten. Absolut positionierte Elemente haben besondere Eigenschaften. Wie gesehen existieren Sie unabhängig vom Flow. Sie wissen nichts von den anderen Elementen und sie können sich überlappen. Ob nun absichtlich oder versehentlich, besser ist absichtlich. Die Eigenschaft "z-index" ermöglicht es, die Reihenfolge der Elemente zu kontrollieren, und zwar, wie der Name schon andeutet, auf der Z-Achse. Ich habe hier im Browser drei Elemente, Box 1, Box 2 und 3, die sich überlappen. Und hier ist von vorne nach hinten eine bestimmte Reihenfolge gegeben. Hier ist im Editor der Quelltext. Sie haben drei "div"s - "id eins", "id zwei", "id drei" - und diese "div"s werden gestaltet. Es sind allesamt absolut positioniert, haben eine Breite von 25 Prozent, und sehen hier mit "padding", "border", "margin" etwas unterschiedlich aus. Dann bekommen die alle verschiedene Werte. "#eins" ist die erste Box, "top: 0", "left: 0", hier im Browser oben "top: 0", "left: 0". Dann im Editor "top: 50", "left: 50" und "top: 100", "left: 100", und hier sehen Sie das Ergebnis. Die Überlappung hierbei erfolgt in der Reihe des Auftauchens im Quelltext. Wenn ein Element wie hier positioniert wird, bekommt es automatisch "z-index: 0" hinzugeschrieben, - intern für den Browser - und bei gleichem "z-index" entscheidet die Reihenfolge der Elemente im Quelltext. Später notierte Elemente stehen vor den weiter oben stehenden Elementen. Das heißt, Sie sehen hier, die sind später, die stehen also weiter nach vorne. Die Eigenschaft "z-index" hat dabei auch wieder ein paar Besonderheiten, Sie kontrolliert, wie bereits erwähnt, die Reihenfolge der Elemente auf der z-Achse, also von vorne nach hinten. Es gilt nur für positionierte Elemente "position: relative", position: fixed", "position: absolute". Und es ist nur relevant, wenn sich diese Elemente überlappen, denn sonst sieht man das eigentlich im Normalfall nicht. Der Initialwert, der Standardwert Default, wie immer Sie es nennen wollen, ist "z-index: 0" Und je höher dieser Wert desto dichter steht das Element am Leser. Bei gleichem "z-index", entscheidet wie gesagt die Reihenfolge im Quelltext. Je später, desto dichter am Leser. Und jetzt wollen wir mal die Reihenfolge umdrehen. "z-index", ich nehme mal "300", Sie können auch einfach nur drei nehmen, das würde auf dasselbe herauslaufen hier. Und hier kommt jetzt "z-index: 200". Aber wenn man größerer Werte nimmt, wie 100, 200, und 300, dann hat man später noch ein bisschen dazwischen Platz. Dann können Sie also noch was mit 150 machen, zum Beispiel hier zwischen. Wenn Sie 1, 2, 3 nehmen, dann geht das nicht ganz so übersichtlich. Die Werte an sich sind aber nicht so wahnsinnig wichtig. Es ist hier ein bisschen praktischer, wenn da ein bisschen Luft zwischen ist. Das erste "div" hat 300, das zweite 200, das dritte 100. Wenn "z-index" der Wert höher ist, dann steht es dichter am Leser. Gespeichert ist. Und das ist noch die alte Variante und jetzt, wenn ich das jetzt neu lade, sollte es sich genau umgekehrt haben. Hier ist im Entwicklertool "z-index: 300". Wenn ich den wieder rausnehme, dann sehen Sie, geht der wieder nach hinten. Das ist "z-index", zur Kontrolle von positionierten Elementen auf der z-Achse.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!