Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

12.4 Raus aus dem Fluss: position: absolute

Im Gegensatz zur relativen nimmt die absolute Positionierung das Element komplett aus dem Fluss heraus. Das Element wird – bildlich gesprochen – hochgezogen, und alle anderen Elemente auf der Seite verhalten sich so, als ob es gar nicht da wäre.

Das HTML für dieses Beispiel ist absolut identisch mit dem für die relative Positionierung, und im CSS wird genau ein Wort geändert:

HTML CSS
<body>
  <div id="anders">Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</body>
body {
  color: black;
  background-color: gray;
  padding: 0;
  margin:0;
}
div {
  width:20%;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
#anders {
  position: absolute;
  top: 25px;
  right: 25px;
  background-color: #f3c600;
}

Nur ein einziges Wort geändert, aber die Wirkung ist enorm. Box 1 steht plötzlich rechts, und bemerkenswerterweise rutschen die Boxen 2 und 3 nach oben: 

Abbildung 12.4: Nur ein Wort geändert – absolute Positionierung
Abbildung 12.4: Nur ein Wort geändert – absolute Positionierung

Absolut positionierte Elemente werden aus dem Fluss herausgehoben und liegen über den anderen Elementen. 

Die genaue Position wird wieder durch top, right, bottom oder left angegeben, aber die Werte für diese vier Eigenschaften orientieren sich nicht mehr an der ursprünglichen Position der Box im Fluss: 

  1. Die absolute Positionierung eines Elements bezieht sich auf das nächste umgebende Element (containing block), das mit relativeabsolute oder fixed positioniert ist. 
  2. Falls kein positioniertes umgebendes Element vorhanden ist (was in der Praxis häufig der Fall ist), erfolgt die Positionierung relativ zum obersten Element des Dokumentbaums, und das ist nicht body, sondern html

Diese beiden Aussagen kann man so zusammenfassen: 

  • Absolute Positionierung ist relativ zu irgendeinem Bezugspunkt.
  • Es gibt zwei verschiedene mögliche Bezugspunkte: 
    • ein umgebendes positioniertes Element  
    • das Stammelement html

Diese Tatsachen sorgen im Alltag für viel Verwirrung und sollen deshalb im Folgenden der Reihe nach etwas genauer unter die Lupe genommen werden.

Überlappungen kontrollieren mit z-index

Falls sich absolut positionierte Elemente überlappen, können Sie mithilfe der Eigenschaft z-index festlegen, welche Elemente vorne und welche hinten liegen. z-index bekommt eine beliebige Zahl zugewiesen, wobei die Grundregel lautet: »Je höher der Wert, desto dichter am Betrachter«. Ein absolut positioniertes Element mit z-index: 300 liegt also über einem Element mit z-index: 100