CSS - Positionierung - Versionsgeschichte

37.49.72.8: /* display */

2019-12-18T07:29:43Z

display

37.49.72.8 am 18. Dezember 2019 um 07:29 Uhr

2019-12-18T07:29:06Z

37.49.32.84 am 22. Februar 2017 um 09:12 Uhr

2017-02-22T09:12:36Z

84.161.136.18: /* Float-Elemente */

2006-06-22T13:57:21Z

Float-Elemente

84.161.136.18 am 22. Juni 2006 um 13:52 Uhr

2006-06-22T13:52:56Z

Neue Seite

== Die Eigenschaften position und float ==

In CSS Layouts kann man Elemente absolut oder relativ positionieren (Maße angeben) Außerdem kann man Elemente 'floaten'.

Positionierungsarten:

position: static;
position: absolute;
position: relative;
position: fixed;

Float Eigenschaft:

float: left;
float: right;
float: none;

===Absolute Positionierung===
* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
* Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
* Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.

===Relative Positionierung===
Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.

=== Float-Elemente ===
* Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
* Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.

===Beispiele===
#box1 {
position: absolute;
top: 70px;
left: 80px;
width: 570px;
padding: 15px;
}

@@ Zeile 28: / Zeile 28: @@
   display: float; // Floated links oder rechts ist aus dem normalen Textfluss genommen.
   display: grid; // für komplexe Seitenlayouts
 === Float-Elemente ===

@@ Zeile 1: / Zeile 1: @@
-== Die Eigenschaften position und float ==
+== position und display ==
 Positionierungsarten:
-  position: static;
+  position: static; -> das normale verhalten.
-  position: absolute;
+  position: absolute; -> mit absoluten Koordinaten an Elternelement anpinnen.
-  position: relative;
+  position: relative; -> relativ zum Elternelement anpinnen
-  position: fixed;
+  position: fixed; -> absolute zum Browserfenster anpinnen
 ===Absolute Positionierung===
-* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
+* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters oder an das nächste Elternelement wenn das absolut oder relativ positioniert ist.
 * Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
 * Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.
@@ Zeile 26: / Zeile 18: @@
 ===Relative Positionierung===
 Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.
 === Float-Elemente ===
 * Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
 * Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.

@@ Zeile 39: / Zeile 39: @@
 width: 570px;
 padding: 15px;
+}

@@ Zeile 30: / Zeile 30: @@
 * Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
 * Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.
+* floatende Elemente müssen immer eine Breite haben
 ===Beispiele===