CSS - Positionierung

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.
• floatende Elemente müssen immer eine Breite haben

Beispiele

1. box1 {

position: absolute; top: 70px; left: 80px; width: 570px; padding: 15px; }