Absolute Positionierung

Ausgangslage

Der Browser layoutet Inhalte automatisch:

Wenn kein Styling definiert ist, kommen alle Inhalte untereinander.

Genauer: Block-Inhalte (Paragraphen) untereinander, Inline-Inhalte (Wörter) nebeneinander.

Positionierung

Wir können diesen Layout-Automatismus ausschalten, in dem wir einem Element die Eigenschaft position:absolute geben.

Die anderen Elemente werden weiterhin automatisch gelayoutet, das absolut positionierte Element erscheint über den anderen Bestandteilen der Webpage. Wir sind nun dafür verantwortlich, dass sich Inhalte nicht überlappen.

Mit den CSS-Eigenschaften top/bottom/left/right können wir die Positionierung genau festlegen. Wie weit von links ist das Element entfernt, wie weit von oben oder unten?

 

/* Dieses Element wird in der rechten unteren Ecke der Webpage platziert */
.icon{
   position: absolute;
   bottom: 10%;
   right: 10%;
}

Element in einem anderen Element positionieren

Meist sollen Elemente nicht auf der ganzen Seite positioniert werden, sondern relativ zu einem anderen Element. Beispielsweise ein Icon in einem News-Teaser, ein Titel auf einem Bild.

Um das umzusetzen, braucht es eine gewisse HTML-Struktur. Die Elemente die absolut positioniert werden sollen, sind "Kinder" der Elemente die den Rahmen vorgeben.

 

<div class="rahmen"> 
   <h1>  Titel der absolut positioniert wird </h1>  
</div>

<style> 
.rahmen{
  position: relative;
}
h1{
  position: absolute;
  top: 1em;
  left: 1em;
}
</style>