Sie sind hier: Startseite -> CSS-Grundlagen -> Positionierung -> Positionsart

CSS-Grundlagen: Positionsart

CSS-Positionsarten: vier denkbare Arten

Will man einen bestimmten Bereich an einer bestimmten Stelle der Webseite einrichten, stehen vier Möglichkeiten unter CSS zur Verfügung.

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.

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.

Übersicht der Unterseiten

Beispiel: absolut

Informationen über ein praktisches CSS-Beispiel für die absolute Positionierung mit CSS-Formatierungen.

Beispiel: relativ

Informationen über ein praktisches CSS-Beispiel für die relative Positionierung mit CSS-Formatierungen.

Beispiel: fix

Informationen über ein praktisches CSS-Beispiel für die fixe Positionierung mit CSS-Formatierungen.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Positionierung

Startseite CSS-Grundlagen