position
position
gehört nicht zu den einfachsten CSS-Eigenschaften.
An den Werten absolute
und relative
ist sicher
der ein oder andere Entwickler schon verzweifelt. Die Komplexität der
Eigenschaft position
stellt jedoch ein leistungsstarkes
Werkzeug dar. Als geübter Entwickler steht Ihnen damit ein kleines Zaubermittel
zur Verfügung. Dieser Beitrag zeigt, wie position
im Detail funktioniert,
worin die Schwierigkeiten bestehen und wie Sie diese lösen können.
position
: static
Der Eigenschaft position
können vier mögliche Werte zuweisen werden:
static
(Standardwert)absolute
relative
fixed
Der Standardwert static
ist dafür verantwortlich, dass alle
HTML-Elemente im Browser nach einander dargestellt werden. Inline-Elemente wie
zum Beispiel <strong>
oder <span>
werden aneinander gereiht. Block-Elemente wie <p>
oder
<div>
führen in ihrer eigenen Defaulteinstellung zu einem
Zeilenumbruch, nehmen ohne weitere Styles die verfügbare Breite ein
und werden untereinander dargestellt.
Das mag sich banal anhören. Für das Verständnis der Eigenschaft
position
ist es jedoch hilfreich, sich diese Tatsache
vor Augen zu führen. Der so genannte Elementfluss, das Ausspielen der
HTML-Elemente von links nach rechts und oben nach unten, kann von
der Eigenschaft position
vollständig aufgehoben werden.
position
wirkt erst in der Kombination mit top
,
right
, bottom
oder left
Die CSS-Eigenschaft position
bewirkt eine Verschiebung von
HTML-Elementen. Doch unabhängig davon, ob Sie absolute
,
relative
oder fixed
verwenden,
position
erfordert immer eine weitere CSS-Eigenschaft.
Das Fähigkeit, dass Elemente positioniert werden können, »aktivieren« Sie
mit position
. Zusätzlich ist eine Definition erforderlich,
wie weit und aus welcher Richtung die Verschiebung sein soll.
Hier ein Beispiel für eine vollständige CSS-Regel mit allen benötigten Deklarationen:
888