CSS - Elemente absolut positionieren

kurz notiert Absolut positionierte Elemente werden aus dem normalen Seitenfluss gelöst.
Ihre Position wird nicht durch vorher notierte Elemente beeinflusst. Sie “schweben” sozusagen über allen anderen Elementen des HTML-Dokuments.

Ihre Position wird immer von der linken oberen Ecke des nächstgelegenen Eltern-Elementes bestimmt, welches absolut, fixed oder relativ positioniert wurde.
Gibt es ein solches Element nicht, so beziehen sich alle Positionsangaben auf die obere linke Ecke des Browserfensters, den so genannten Viewport.

Die Position wird durch die Eigenschaften top, right, bottom oder left angegeben und somit um den entsprechenden Wert nach links, rechts, oben oder unten verschoben.

Dabei sollte immer nur entweder left oder right bzw. top oder bottom definiert werden.

Möchte man ein Element also innerhalb eines anderen Elementes absolut positionieren, so ist es empfehlenswert, ein in der Reihenfolge im Quelltext vor dem Element liegendes Elternelement erst relativ positionieren.
Damit wird dieses zum Bezugspunkt für das nun absolut zu positionierende innen liegende Element.

Beispiel für ein rechts oben positioniertes Element:

HTML:

<div id="box">
<p class="rechtsoben">Ich stehe immer rechts oben.</p>
</div>

CSS:

#box {
 position:relative;
 height:100px;
 width:300px;
 background-color:#FFEAC0;
 border: 1px solid #FFA800;
}
.rechtsoben {
 position:absolute;
 top:10px;
 right:10px;
 color: #cc0000;
}

Das Element wird so 10px vom oberen rechten Rand seines Elternelementes aus positioniert!

Und so sieht das Ganze dann live aus:

Ich stehe immer rechts oben.