CSS position • Art der Positionierung

static, relative, absolute, fixed, sticky

Im reinen HTML sind Elemente im Fluss des Dokuments positioniert. Sie erscheinen Element für Element nacheinander in der Reihenfolge im Browserfenster wie im HTML-Markup. Diese einfachste Art der Positionierung wird auch als flow oder statisch bezeichnet.

CSS position entscheidet nicht, wohin ein Element positioniert wird, sondern die Art der Positionierung. position allein ändert und bewegt nichts. Positioniert wird erst durch top / right / bottom / left (oder inset).

position kann auf alle Elemente angewendet werden und kann einen von sieben Werten annahmen, fünf davon sind relevant im Webdesign.

static (Default)

Das Element bleibt im normalen Dokumentenfluss, top, right, left und bottom haben keine Wirkung.

.block {
	position: static
}

relative

Das Element beleibt im normalen Dokumentenfluss, aber top: 10rem verschiebt das Element relativ zu seiner ursprünglichen Position. position: relative wird im Wesentlichen als Anker für absolut positionierte Elemente eingesetzt.

.block {
	position: relative;
	top: 10rem;
}

absolute

Das Element verlässt den Dokumentenfluss und wird relativ zum nächsten nicht statisch positionierten Vorfahren (fast immer ein relativ positioniertes Element) positioniert.

.child {
	position: absolute;
	top: 2rem;
	right: 10%;
}

fixed

Das Element verlässt den Dokumentenfluss und wird relativ zum Viewport eingesetzt. Beim Scrollen bleibt das Element an seiner ursprünglichen Position.

.header {
  position: fixed;
  top: 0;
}

sticky

Das Element bleibt im Dokumentenfluss wird erst beim Scrollen fixiert. Das Element braucht top | left | right | bottom , um sich festzusetzen.

.nav {
  position: sticky;
  top: 0;
}

inherit

Das Element übernimmt den position-Wert vom Elternelement.

initial

das Element übernimmt den CSS-Default (static).

absolute, relative und sticky sind heute die gebräuchlichsten Kombinationen für Layouts.

position: Container relative, Overlay absolute

Flex und Grid haben heute viele Anwendungen übernommen, die früher fast nur mit position: absolute/relative gelöst werden konnten. Aber position: absolute/relative sind nicht überflüssig geworden. Sie werden immer noch gebraucht, aber für andere Aufgaben als früher. position: absolute / relative werden heute für die punktgenaue Überlagerung/Platzierung von Elementen genutzt. Sie beschäftigen sich mit den kleinen Details. Hier z.B. die Lupe in einem Eingabefeld:

<div class="searchloupe">
	<input type="text" placeholder="Suche...">
	<span class="icon">🔍</span>
</div>

.searchloupe {
	position: relative;   /* Referenz für das absolute Icon */
	input {
		…
	}
	.icon {
		position: absolute;
		top: 50%;
		left: 0.5rem;         /* Icon links */
		transform: translateY(-50%);
		pointer-events: none; /* Klicks gehen ins Input-Feld */
	}
}

position: static

static ist die Voreinstellung: Die Box liegt im Fluß des Dokuments und ist normal positioniert. position: static muss nicht deklariert werden, es sei denn, ein anderer Wert soll überschrieben werden.

Die CSS-Eigenschaften top, bottom, left und right haben keinen Einfluss auf eine statische Box.

position: relative

Eine relativ positionierte Box liegt im Fluß des Dokuments – als wäre sie statisch oder gar nicht positioniert. Für Boxen oder Blöcke vor oder hinter dem relativ positionierten Block macht es keinen Unterschied, ob die Box relativ oder statisch bzw. gar nicht positioniert ist.

top, bottom, left und right verschieben eine relative Box von ihrer ursprünglichen Position und hinterlassen eine Lücke an der dieser Stelle. Die Inhalte der folgenden Blöcke reagieren, als wäre die relative Box nicht verschoben.

Bei Änderungen vorangehender Blöcke behält die Box ihre Position relativ zu ihrem Ursprung und wandert mit.
Das ist das Relative an der relativen Positionierung.

CSS margin oder die Änderung der Größe hingegen beeinflussen die folgenden Blöcke.

Relative positionierte Elemente werden in erster Linie als Behälter für absolut positionierte Elemente genutzt – z.B. für Slideshows, Animationen und für Text, der über Bilder gelegt wird.

Damit der Text über dem Bild liegt, wird für den Container-Block rund um Bild und Text position: relative notiert.

Bild und Text sind jeweils mit position: absolut ausgestattet. bottom: 0 nimmt den Text aus dem Fluß und legt ihn über das Bild.

.flowers figcaption { 
    width: 100%; height: 60px;
}
	
@media (min-width: 480px) {
    .flowers { 
        position: relative;
        width: 450px; height: 192px;
    }
    .flowers div {
        position: absolute;
    }
    .flowers figcaption { 
        position: absolute; 
        bottom: 0px;
    }
}

position: absolute

Ein absolut positionierter Block wird aus dem Fluß des Dokuments genommen und hinterläßt keine Lücke. Die dahinter liegenen Inhalte schließen die Lücke und reagieren, als gäbe es die absolute Box nicht.

top, bottom, left und right positionieren eine absolut positionierte Box. Wo die Box dann landet, hängt von ihrem umfassenden Element ab (meist ein relativ positionierter Block).

Für eine absolut positionierte Box kann zwar margin angegeben werden, aber margin hätte keinen Einfluß auf andere Blöcke.

Wenn für einen Block mit CSS position: absolute keine Breite angegeben ist, hat er eine – sagen wir mal – ziemlich exotische Eigenheit: Absolut positionierte Elemente werden nur so breit wie ihr Inhalt. Wird also nur ein Wort oder ein Bild in den Block gesetzt, wird der Block nur so breit wie das Wort oder das Bild.

Für diesen absolut positionierten Block ist weder top / bottom noch left / right angegeben. Würde top: 0; left: 0; eingesetzt, würde der Block nach oben links in den Viewport rutschen.

Wo der Block jetzt gelandet ist? Er liegt innerhalb einer relativ positionierten Section, also 100px von oben und 100px von links.

Gut zu sehen, dass positionierte Blöcke andere Inhalte überlappen können. Um zu entscheiden, welcher Block das oben und sichtbar sein soll, gibt es eine weitere Eigenschaft für positionierte Blöcke: z-index. Der z-index legt die Stapelreihenfolge überlappender Blöckefest .

Positionieren für Layout

Obwohl CSS position so klingt, als wäre es die Technik der Wahl für das Layout von Webseiten, ist position keine Grundlage für den Aufbau eines Layouts. Seine Stärke entwickelt position, wenn ein relativ positionierter Block als Container für absolut positionierte Elemente eingesetzt wird.

Ein Element mit position: relative behält immer seine relative Position innerhalb des Inhalts. Der relativ positionierte Container wird zum Koordinatensystem der absoluten Blöcke und ist die Grundlage für Drop-Down-Menüs, Slideshows und Animationen.

position: fixed und position: sticky fallen in die Rubrik der Effekte für die Benutzerschnittstelle.

Für das Layout sind heute display:flex und display:grid die führenden CSS-Eigenschaften.

Ausführliches Tutorial für position: relative und position: absolute