INT

Internet-Technik

Layout

position
float
position
float

Manchmal ist es für ein Layout erforderlich, Elemente frei im Browserfenster positionieren zu können.

Für diesen Fall ist in CSS die Eigenschaft position vorgesehen, die mehrere Werte annehmen kann.

position: static;

Die Standard-Einstellung. Das Element liegt im normalen Seitenfluss.

position: absolute;

Das Element wird aus dem Seitenfluss herausgelöst und lässt sich mit den Eigenschaften top, left, bottom, right oder inset platzieren.

Der Ursprung des Koordinaten­systems liegt dabei in der linken oberen Ecke des Dokuments.

				
					.test-element {
					  position: absolute;

					  top: 200px;
					  left: 150px;

					  width: 300px;
					  height: 200px;
					}
150px 200px

Alternativ kann man auch alle Abstände auf einmal via inset definieren.

Die Schreibweise ist identisch zu margin: Im Uhrzeigersinn.

				
					.test-element {
					  position: absolute;

					  inset: 200px 190px 80px 150px;
					  /* top right bottom left */
					}
150px 200px 190px 80px

position: fixed;

Der wichtige Unterschied zu position: absolute ist, dass das Element auch beim Scrollen der Seite permanent sichtbar bleibt.

Der Ursprung des Koordinaten­systems liegt in diesem Fall in der linken oberen Ecke des Browserfensters.

				
					.test-element {
					  position: fixed;

					  top: 0;
					  left: 0;

					  width: 100%;
					  height: 40px;
					}

position: relative;

Das Element lässt sich von seiner ursprünglichen Position aus mit top, left, bottom oder right versetzen.

				
					.test-element {
					  position: relative;

					  top: 60px;
					  left: 100px;
					}
100 60

Der Ursprung des Koordinaten­systems ist dabei die linke obere Koordinate der ursprünglichen Position des Elements.

Relative Positionierung wird eher selten eingesetzt.

Es gibt aber zwei populäre Einsatzzwecke.

1. Elemente um einige Pixel zu verschieben, um optische Korrekturen umzusetzen.

2. Um einen neuen Kontext zu schaffen, innerhalb dessen sich absolut positionieren lässt.

Elemente lassen sich nämlich auch innerhalb von bereits positio­nierten Elementen platzieren.

Dann wird die linke obere Ecke des umgebenden Elements der neue Ursprung für die Positionierung.

				
					.container {
					  position: relative;
					}

					.spalte1 {
						left: 0;
						width: 50%;
					}

					.spalte2 {
						right: 0;
						width: 50%;
					}
.spalte1 .spalte2

absolute, fixed und relative erzeugen einen solchen neuen Kontext, static hingegen nicht.

Eine Angabe zum Versatz, zB. top oder left, ist für den Container nicht zwingend notwendig.

position: sticky;

position sticky:
how it really works

Referenz

position
float

Die CSS-Eigenschaften float und clear ermöglichen, Text um Bilder und andere Elemente fließen zu lassen.

float kann die Werte left, right und none annehmen.

clear kann die Werte left, right und both annehmen.

Ein Beispiel mit normalem Seitenfluss,
Bild und Text.

Incididunt aesthetic master cleanse wes anderson, velit +1 id laborum. Organic artisan qui readymade. Post-ironic put a bird on it food truck artisan, master cleanse aliquip high life deserunt banh mi fanny pack kale chips labore vegan godard. Hoodie fixie lomo magna, before they sold out nihil aute eu trust fund cupidatat swag ad minim seitan cliche. Master cleanse labore ad, cray lo-fi et VHS. Wes anderson sartorial retro pinterest consequat vero. Nostrud gastropub ennui, fap pour-over duis organic bicycle rights twee retro.


		img.beispiel {
			float: left;
			width: 140px;
			height: 100px;
		}

Erhält ein Element float, wird es auf die Seite gedrückt und nach­folgen­der Text umfliesst es.

Incididunt aesthetic master cleanse wes anderson, velit +1 id laborum. Organic artisan qui readymade. Post-ironic put a bird on it food truck artisan, master cleanse aliquip high life deserunt banh mi fanny pack kale chips labore vegan godard. Hoodie fixie lomo magna, before they sold out nihil aute eu trust fund cupidatat swag ad minim seitan cliche. Master cleanse labore ad, cray lo-fi et VHS. Wes anderson sartorial retro pinterest consequat vero. Nostrud gastropub ennui, fap pour-over duis organic bicycle rights twee retro.

Gibt man dem nachfolgenden Textabsatz clear, erzeugt er in jedem Fall einen neuen Umbruch.

Incididunt aesthetic master cleanse wes anderson, velit +1 id laborum. Organic artisan qui readymade. Post-ironic put a bird on it food truck artisan, master cleanse aliquip high life deserunt banh mi fanny pack kale chips labore vegan godard. Hoodie fixie lomo magna, before they sold out nihil aute eu trust fund cupidatat swag ad minim seitan cliche. Master cleanse labore ad, cray lo-fi et VHS. Wes anderson sartorial retro pinterest consequat vero. Nostrud gastropub ennui, fap pour-over duis organic bicycle rights twee retro.


		p {
			clear: left;
		}

Mehrere Elemente nacheinander mit float erscheinen neben­einander; das erste Element am weitesten auf der Seite.

Incididunt aesthetic master cleanse wes anderson, velit +1 id laborum. Organic artisan qui readymade. Post-ironic put a bird on it food truck artisan, master cleanse aliquip high life deserunt banh mi fanny pack kale chips labore vegan godard. Hoodie fixie lomo magna, before they sold out nihil aute eu trust fund cupidatat swag ad minim seitan cliche. Master cleanse labore ad, cray lo-fi et VHS. Wes anderson sartorial retro pinterest consequat vero. Nostrud gastropub ennui, fap pour-over duis organic bicycle rights twee retro.

Diese Tatsache hat man früher benutzt, um Gestaltungsraster umzusetzen. Das hatte leider auch viele Nachteile und Bugs. Seit Flexbox und Grid ist das nicht mehr nötig.

Referenz

Github Repo

Beginne mit Aufgabe 10.

https://arnorichter.de/
hsma/int/aufgaben