CSS position:absolute in position:relative

Relativ positioniert

Das Bezugssystem oder Koordinatensystem eines Elements mit position: relative ist das HTML-Dokument. Wird einem relativ positionierten Block eine Position mit top, right, bottom oder left zugewiesen, liegt die Position immer relativ zu seinen ursprünglichen Platz im HTML-Dokument. Das ist das Relative an der relativen Positionierung.

Zunächst spielt es also keine Rolle, ob das HTML-Element relativ positioniert ist oder nicht – es fließt mit dem Inhalt. Ein Block mit position: relative gehorcht nicht nur auf margin-top, margin-right, margin-left und margin-bottom, sondern auch auf top, right, bottom und left.

Relativ mit top, right, bottom, left oder margin

Mit top, right, bottom oder left hinterläßt der Block eine Lücke an seiner ursprünglichen Position und legt sich u.U. über andere Inhalte. CSS margin hingegen verschiebt den Block gegen seinen Container.

Was wir von einem relativ positionierten Block erwarten, ist ein Block, der immer brav bei wachsenden und schrumpfenden Inhalt mitwandert: Seine Position bleibt relativ zum Inhalt. Das Besondere des relativ positionierten Blocks kommt zum Tragen, wenn wir einen absolut positionierten Block in den relativ positionierten Block setzen.

position:absolute in Blöcken mit position:relative

Wenn ein HTML-Element mit position: absolute in einem Block mit position: relative sitzt, wird der relativ positionierte Block zum Koordinatensystem des absolut positionierten Blocks.

Seine Position wird anhand des relativ positionierten Blocks berechnet – nicht mehr aus den Koordinaten des Browserfensters. Das Koordinatensystem eines HTML-Blocks mit CSS position: absolute ist der relativ positionierte Block.

Die absolut positionierte Box wandert mit dem relativ positionierten Block, wenn sich der Inhalt vor dem relativen Block ändert. Der Block mit position:absolute bleibt an seiner Position innerhalb des relativ positionierten Blocks und wandert mit.

Dieses Verhalten von position:absolute in position:relative ist die Grundlage für Animationen, Slider und Text über Bildern.

#slider {
   height: 370px;
   width: 90%;
   overflow: hidden;
   position: relative;
}

#slider figure {
   position: absolute;
   margin: 0;
   bottom: 360px; /* Originalposition - Nicht im sichtbaren Ausschnitt */
   left: calc(50% - 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

Ausführliches Beispiel: CSS Slideshow mit Timeline

Egal wie viel Platz die übrigen Boxen in der relativ positionierten Box beanspruchen: Der absolut positionierte Block bleibt an der Position top:0 der relativ positionierten Box.

Absolute oder relative Positionierung?

Für das Webseiten-Layout in Spalten (z.B. Hauptinhalt und Navigation oder Sidebar) wird diese Kombination aus relativ und absolut positionierten Blöcken kaum verwendet.

Anstelle von »absolut in relativ« verwendet man besser einen Block mit CSS float oder display:inline-block, da CSS die Höhe des Blocks mit CSS float feststellen kann, nicht aber die Höhe eines absolut positionierten Blocks. Für ein Layout in Spalten steht heute auch das Flexmodell als Alternative zur Verfügung.

Absolut in relativ positionierte Blöcke verwendet man eher für die Navigation und für Slideshows.

Absolut positionierte Elemente zentrieren

Wie zentriere ich ein absolut positioniertes Element?

<div class="wrap">
   <div class="abs">
      <img src="hibiskus.webp" width="300" height="198">
   </div>
</div>

.wrap { 
   position: relative;
   display:flex;
   justify-content: center; // horizontal zentriert
   align-items: center;     // vertikal zentriert
}

.abs {
   position: absolute;
}

display: flex wird von allen modernen Browsern unterstützt – sogar von IE10 (mit Präfix).