Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Position-Eigenschaft

Testen Sie unsere 1983 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Anpassung der Position-Eigenschaft platziert HTML-Elemente in einer Website entweder statisch, relativ oder absolut zur normalen Position sowie fixiert diese bei Bedarf.

Transkript

Im normalen Flow stehen Blockelemente also immer untereinander und haben einen integrierten Zeilenumbruch, wie hier in diesem Beispiel zu sehen ist. Der Flow, der normale Fluss der Elemente, und die Eigenschaft "position". Es gibt hier im normalen Flow die Standardeinstellung "position: static". Wenn also im CSS bei einem Element nichts dabei steht, dann hat es automatisch dieses "position: static", wobei der Name "static" ein bisschen ironisch ist, denn es ist der Fluss der Elemente und der ist alles andere als statisch. Aber "position: static" heißt die Standardeinstellung für die Eigenschaft "position". Dann gibt es "position: relative", das Sie gleich kennenlernen, das heißt also relativ zur normalen Positionierung, zur normalen Position. Und dann gibt es absolute Positionierung. Wenn etwas relativ ist, gibt es das auch absolut ganz oft, also "position: absolute". Und es gibt, last but not least, auch noch "position: fixed", also eine fixierte Position. Zunächst lernen Sie "position: relative" kennen, und dann den Unterschied zu "position: absolute", direkt hinterher. Ausgangspunkt sind hier diese drei div-Elemente, "03-position-relative.html", und im Editor sieht das Ganze so aus. Hier ist die Datei, drei div-Boxen, ein ganz bisschen CSS, und ich schreibe jetzt hier unten drunter direkt hier erst mal ein Kommentar und sage "Positionierung" und dann geht es gleich weiter mit dem CSS. Ich möchte die erste Box, also das erste div ansprechen. Und das geht mit einem Selektor, wie "div:first-child". "div:first-child" heißt das erste Kind, das ein div ist, und das ist genau dieses hier. Andere "div"s werden dabei nicht ausgewählt. So, "div:first-child" und dann kommt hier jetzt die geschweiften Klammern und da rein kommen hier die Eigenschaften zur Positionierung. Also erstes nehme ich mal einen kleinen Hintergrund, "background-color". Der soll etwas anders sein, damit man ihn deutlich erkennen kann. "e3c0c0" habe ich ausgesucht, dann geht es weiter mit "position". "positon" und zum Kennenlernen "relative". So, "position: relative". Wenn ich jetzt einmal speichere, rübergehe in den Browser und die Seite neu lade, hat sich scheinbar überhaupt nichts geändert. Abgesehen von der Hintergrundfarbe hier. Wenn ich aber jetzt im Entwicklertool das Ganze aufrufe, dann sehen Sie, dass die "div"s, hier das erste "div" "position: relative" bekommen hat. und die anderen nichts im Vergleich dazu. Das hat also soweit geklappt. Das erste "div" wird hier gestaltet. Jetzt gibt es für die Eigenschaft "position" vier andere Eigenschaften, namens "top", "right", "bottom" und "left", mit denen man die Positionierung genauer bestimmen kann. Also ich sage "top: 25 px". Speichere, gehe rüber in den Browser, und lade neu. Und Sie sehen, was passiert. Die selektierte Box hier, das erste "div", bekommt "top" 25 Pixel. Es werden also oben 25 Pixel eingefügt und die Box wird nach unten gedrückt. Das ist der erste Wert, Der zweite ist "right", Doppelpunkt, auch 25 Pixel. So und wieder speichern und rüber in den Browser und neu laden. und Sie sehen auch hier ist es etwas unerwartet. Es geht nicht nach rechts, sondern rechts werden 25 Pixel eingefügt und die Box wird nach links gedrückt. Und "top: 25 Pixel" drückt die Box nach unten. Das ist also ein bisschen unerwartet. Es ist eigentlich ganz logisch, wenn man drüber nachdenkt, aber trotzdem wirkt "position: relative" bei den ersten Versuchen wie von hinten durch die Brust ins Auge, es ist etwas gewöhnungsbedürftig. Sie können jetzt hier mit den anderen Werten probieren, Sie können zum Beispiel einmal "left" reinschreiben, das speichern und dann neu laden. Und damit sehen Sie schon, wie sich das auswirkt. Ich gehe aber hier mal wieder zurück zu "right", denn ich möchte Ihnen jetzt noch zeigen, wie sich das mit der absoluten Positionierung unterscheidet. Sie sehen, die relative nimmt also als Ausgangspunkt hier die ursprüngliche Position. Und die ursprüngliche Position bleibt geschützt. Da kommt also nichts anderes hin. Die anderen Elemente bleiben an ihren Positionen, die rutschen nicht nach oben. wenn ich jetzt rüber gehe, in den Editor, und ich tausche einfach nur das "relative" gegen "absolute" aus, - mit einem "e" am Ende - speichere wieder, gehe wieder rüber in den Browser und lade neu, dann sehen Sie, das hat sich ganz grundlegend geändert. Im CSS nur ein Wort anders, aber die Wirkung ist enorm, denn Box 1 steht plötzlich rechts außen. Und, was genauso wichtig ist, Box 2 und 3 rutschen nach oben. Das heißt bei der absoluten Positionierung ist die Position dieser Box im Flow, im Dokumentenfluss nicht mehr geschützt. Die werden quasi bildlich gesprochen aus diesem Fluss herausgehoben, nach vorne, und liegen etwas über den anderen. Und die sehen sich nicht mehr. Diese drei Boxen, die kennen sich nicht mehr. Also diese beiden kennen sich noch, aber die mit dem roten Hintergrund, Box 1, hat mit den anderen nichts mehr zu tun. Die absolute Positionierung bewirkt, dass die Box für die anderen nicht mehr zu sehen ist. Die genaue Position wird auch wieder mit "top", "right", "bottom" oder "left" angegeben, aber die Werte für diese Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss. Absolute Positionierung bezieht sich immer auf das nächste umgebende Element, das mit "relative", "absolut" oder "fixed" positioniert ist. Da gilt, da es hier keines gibt, ist das umgebende Element das Stammelement HTML. Das ist der sogenannte Initial Containing Block, der also andere Elemente enthält. Das ist nicht hier der "body", sondern das ist tatsächlich das Stammelement HTML. "top" und "right", die 25 Pixel werden also von diesem Initial Containing Block aus gezählt. Absolute Positionierung ist also immer relativ zu einem Bezugspunkt. Es gibt zwei mögliche Bezugspunkte, zum einen das Stammelement HTML, so wie hier jetzt, zum anderen aber auch ein umgebendes positioniertes Element. In einem etwas komplexeren Layout könnte man das machen. Man nimmt ein Element, positioniert das relativ und schiebt das da drin hin und her. Das ist ein Trick, den Sie noch genauer kennenlernen werden, aber absolute Positionierung bewirkt etwas völlig anderes als relative Positionierung.

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!