# Drop-Down-Menüs mit CSS: Heureka!

## Beispiel-Seite

Mit position: können Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:

- static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
- relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
- absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
- fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend. Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente erhalten.

Mit absolute oder fixed positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente.

Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde. Die gewünschte abweichende Position müssen Sie zusätzlich angeben. Dies können Sie beispielsweise mit Angaben für nach unten top, nach unten left, nach unten bottom oder nach unten right tun.

Wenn Sie also beispielsweise `position:absolute; top:30px` angeben, dann legen Sie für das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nächsten von static abweichend positionierten Vorfahrenelements beginnt.

Wenn Sie `position:relative; top:5px` notieren, dann legen Sie für das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wäre.

Impressum | Kontakt | Sitemap