Die Positionierung brauche ich selten und muss sie mir immer wieder vergegenwärtigen. Deshalb das wichtigste in Kürze.
Default ist position:static und bedeutet, dass das Objekt nicht speziell positioniert wird und einfach dahin kommt, wo es kommen muss.
Mit position:relative kommt das Objekt auch da, wo es kommen muss. Man kann es aber zusätzlich verschieben:
.relativeObj {
position:relative;
top:10px;
left:-10px;
}
top und left bewirken, dass das Objekt 10px und -10px bezüglich ihrer ursprünglichen Position verschoben wird. Speziell ist daran, dass anschliessende Objekte diese Verschiebung nicht ausfüllen, d.h. es entseht eventuell ungewollt leerer Platz.
Mit position:absolute kann man das Objekt irgendwo fix plazieren. Es beansprucht keinen Platz gegenüber anderen Div-Containern und hinterlässt damit auch kein Loch (leerer Platz). Meistens verwende ich position:absolute zusammen mit position:relative:
.aussen
{
position:relative;
}
.innen
{
position:absolute;
top:10;
left;10;
}
Eine Verschachtelung
<div css="aussen">
<div css="innen">
</div>
</div>
hat nun zur Folge, dass der innere absolut-positionierte Div innerhalb des Äusseren bleibt. Und dies geschieht nur deshalb, weil der Äussere relativ positioniert ist!
So, jetzt sollte es auch im Kopf bleiben.