CSS, HTML und Javascript mit {stil}

CSS position • absolut, relativ und float

CSS Position: position:absolute, 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.

Das 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.

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.

Position mit top, right, bottom, left

Position mit margin

Zunächst spielt es also keine Rolle, ob das HTML-Element relativ positioniert ist oder nicht – es fließt mit dem Inhalt. 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.

Was wir aber 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.

Absolut in relativ positionierten Blöcken

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.

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 in relative positioniertes Bild 1 Absolut in relative positioniertes Bild 2 Absolut in relative positioniertes Bild 3
.slideshow { position: relative }
.slideshow img { position: absolute }

Absolut positionierte Elemente zentrieren

Wie zentriere ich ein absolut positioniertes Element?

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;