Positionierungsarten in CSS

Wie Elemente positioniert werden können.

Will man einen bestimmten Bereich an einer bestimmten Stelle der Webseite einrichten, stehen vier Möglichkeiten unter CSS zur Verfügung, um die Positionierung zu definieren. Man sollte jeder der vier Arten genau kennen, um die Entscheidung treffen zu können, welche geeignet ist.

Es gibt insgesamt mit static, absolute, relativ und fixed vier Zustände, die ein Element auf einer Webseite einnehmen kann. Jede hat Vorteile und Nachteile und es hängt von Projekt und Ausgangslage ab, wofür man sich entscheiden wird.

Von der üblichen Darstellung bis zur Fixierung

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

static
Diese Angabe ist nicht erforderlich, denn es handelt sich um die Standardangabe. Das bedeutet, dass die Elemente so angeordnet werden, wie sie in der Programmierung vorgesehen sind. CSS verändert die Position nicht.

absolute
Mit dieser Angabe stellt man ein Element absolut an eine bestimmte Stelle der Webseite. Das kann man nicht machen, wenn man mit dynamischen Seiten, die sich an die Bildschirmauflösung anpassen, arbeitet. Hat man aber eine Webseite, die zum Beispiel fix 1.000 Pixel breit ist, kann man eine absolute Angabe vornehmen. Eine Anweisung sieht zum Beispiel so aus:

position:absolute;
left:200px; top:200px; width:400px; height:400px;

In diesem Fall gibt man dem Browser die Information mit auf den Weg, dass es sich um eine absolute Position handelt und dabei geht es um ein Quadrat, das 400 Pixel breit und ebenso hoch ist, das 200 Pixel vom linken Rand und 200 Pixel vom oberen Rand entfernt dargestellt werden soll.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Die absolute Positionierung ist in der letzten Zeit eher ins Hintertreffen gelangt, weil immer mehr Seiten mit Prozentwerten arbeiten, sodass die Seite den Monitor bei unterschiedlichen Bildschirmauflösungen ähnlich ausfüllen. Eine absolute Positionierung würde dann bedeuten, dass das Element an einer falschen Stelle erscheinen würde.

relativ
Die Positionsangabe relativ bedeutet, dass das Element im Textfluss der Programmierung abgearbeitet wird, aber mit den Abstandsangaben der vier Himmelsrichtungen verschoben werden kann. Beispiel:

position:relative;
left: 60px; top: 30px;

In diesem Fall wird das Element um 60 Pixel nach rechts verschoben und um 30 Pixel nach unten, um der Anordnung gerecht zu werden.

fixed
Fixed ist eine sehr selten genützte Positionsangabe in CSS. Hierbei wird ein Bereich positioniert, der sich nicht vom Fleck rührt, auch wenn die gesamte Seite gescrollt werden kann. So kann der Effekt entstehen, dass der Text als Hintergrund des Elementes gescrollt wird, das Element - eine Ebene zum Beispiel - bleibt aber unbeeindruckt an gleicher Stelle erhalten. Beispiel:

position:fixed;
left: 100px; top: 200px; width: 200px; height: 200px;

Ein Feld mit 200 x 200 Pixel wird 100 Pixel vom linken Rand entfernt und 200 Pixel vom oberen Rand entfernt dargestellt und bleibt auch erhalten, wenn der sonstige Inhalt der Seite zum Scrollen ist.

Lesen Sie auch

Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.

Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.

Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.

Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.

Themenseiten

Startseite CSS-Grundlagen

Positionierungsarten in CSS

Wie Elemente positioniert werden können.

Von der üblichen Darstellung bis zur Fixierung

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich