CSS position:absolute in position:relative

CSS position:absolute und position:relative

Elemente mit CSS position: relative verhalten sich zunächst nicht anders als statische (nicht positionierte) Boxen. Sie fließen mit dem Inhalt und verdrängen den folgenden Inhalt nach unten.

Sie legen sich nicht über oder unter die Inhalte und lassen sich nicht normalen Blöcken unterscheiden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat.

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est.

top, right, bottom, left

Position mit margin

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Morbi luctus, risus vitae convallis lacinia, libero elit mattis mi, quis lobortis lorem est ac erat.

A

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est.

Fensterbreite

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.

simply an A
Gib mir ein A
kaktus
Mein kleiner Kaktus
Rote Uhr
Roter Wecker
Umschlag und Stempel
Brief und Siegel
Schwarze Box
Black Box
#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?

Absolut positioniertes Element horizontal zentrieren
<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).