Elemente in CSS positionieren: Ein Überblick
Kommentare

Mithilfe von CSS lassen sich Content-Elemente auf unterschiedliche Art und Weise auf einer Website anordnen. Damit wird dem Website-Design eine ganz eigene Struktur verliehen und Content kann so zu einem Eyecatcher gemacht werden.

Um Elemente in CSS zu positionieren, gibt es verschiedene Möglichkeiten, die Amy Brown in ihrem Artikel A Comprehensive Overview on Positioning in CSS zusammengefasst hat.

Die verschiedenen Positionierungs-Properties

Den meisten dürfte die Nutzungsweise des Positioning-Properties in CSS geläufig sein, allerdings fällt der richtige Einsatz vielen Webdesignern oft trotzdem schwer. Der folgende Überblick über die verschiedenen Werte des Positioning-Properties soll daher Abhilfe schaffen.

1. Statische Positionierung

Bei einer statischen Positionierung bleibt das Element in genau der Position, die für das Element vorgesehen ist. Sie ist zudem die automatische Position des Elements.

2. Relative Positionierung

Auf den ersten Blick gibt es für viele kaum einen Unterschied zwischen einer statischen und relativen Position, allerdings akzeptiert die relative Positionierung im Gegensatz zur statischen Positionierung Box-Offset-Properties. Trotzdem bleiben die Elemente in ihrem normalen oder statischen Flow auf der Website, wenngleich sie sich mit anderen Elemente überschneiden können, ohne ihre eigene Default-Position zu beeinflussen.

3. Absolute Positionierung

Ein Element wird dann als absolute bezeichnet, wenn es Box-Offset-Properties akzeptiert und gleichzeitig aus dem normalen Flow des Dokuments entfernt wird. Damit erhalten solche Elemente eine Position, die direkt mit dem Parent-Element verbunden ist. Zudem spezifiziert das absolute Positioning horizontale und vertikale Offset-Properties für die Elemente.

4. Fixiert-positionierte Elemente

Fixiert-positionierte Elemente legen das gleiche Verhalten wie absolut positionierte Elemente an den Tag – sieht man mal von zwei Unterschieden ab. So ist ihr Positionsverhalten relativ zum Viewport, sodass sich der Kontext durch das Hinzufügen von position:relative zum Parent-Element nicht ändert. Zudem verändert sich die Positionierung solcher fixierten Elemente auch beim Scrollen der Seite nicht. Bedenken sollte man bei ihrem Einsatz allerdings, dass sie nicht mit dem Internet Explorer kompatibel sind.

Für ein erfolgreiches Webdesign ist es wichtig, zu wissen, wie sich Elemente im CSS positionieren lassen. Doch selbst wenn man weiß, welche verschiedenen Möglichkeiten es gibt, ist die Entscheidung für die richtige Positionierungs-Methode nicht immer einfach, und oft genug sorgt das ausgewählte Property nicht für den gewünschten Effekt. Dieser kurze Überblick, den Amy Brown in ihrem Artikel mit verschiedenen Code-Beispielen und Grafiken visuell unterstützt, soll darum dabei helfen, sich die einzelnen Möglichkeiten noch mal ins Gedächtnis zu rufen, damit die Positionierung einzelner Elemente im CSS beim nächsten Projekt problemlos gelingt.

Aufmacherbild: Geometric origami background von Shutterstock / Urheberrecht: elettaria

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -