position

Das position property definiert, welche Regeln für die Berechnung der Position eines Elements gelten. 

position: static

position: relative

position: absolute

position: fixed

position: static

Das ist der default Wert von position. Es wird nur explizit gesetzt um zu überschreiben, falls man vorher einen anderen Wert gesetzt hat. In der Praxis selten nötig.

posititioned

Alle folgenden Werte für das position property bewirken, dass das Element als positioniert gilt.

Dieses kann dann mit den properties top, right, bottom, left von seiner ursprünglichen (static) Position verschoben werden.

Die unterschiedlichen Werte für position bewirken, dass sich top, right, bottom, left auf etwas anderes beziehen.

position: relative

Ist position: relative gesetzt, so beziehen sich top, right, bottom, left auf die Position des Elements die es hätte, wenn es position: static wäre.

http://jsbin.com/qecunu

position: absolute

Ist position: absolute gesetzt, so beziehen sich top, right, bottom, left auf die jeweilige Seite des ersten positionierten Elternelements.

Das absolute positionierte Element wird aus dem normalen flow entfernt. Es hat also keinen Einfluss mehr auf die es umgebenden Elemente.

http://jsbin.com/coguqo/

Ändere in diesem JSBin den Wert des position attributes des containers zu static und verstehe was passiert.

position: fixed

Ist position: fixed gesetzt, so beziehen sich top, right, bottom, left auf die jeweilige Seite des Viewports.

Das fixed positionierte Element wird aus dem normalen flow entfernt. Es hat also keinen Einfluss mehr auf die es umgebenden Elemente.

http://jsbin.com/vajusi​

Aufgabe

Verwendet verschiedene Units für top, right, bottom, left und findet heraus, auf was sich Werte in % beziehen für die verschiedenen Positionsarten.

negative margin

Ein kleiner Trick, der auch für die Positionierung verwendet werden kann ist für margin einen negativen Wert zu verweden.

Wir schauen uns das anhand des floating layout JSBins an:

http://jsbin.com/meqapa/