CSS, HTML und Javascript mit {stil}

CSS position • Typ der Positionierung

Positionieren mit position: Slideshows, Animationen, Navigation

CSS position nimmt Elemente aus dem Fluss und gibt ihnen eine Position relativ zum Dokument, zum Viewport (dem Browserfenster) oder relativ zu ihrem umfassenden Block.

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

Alle HTML-Inhalte erzeugen Boxen, die in einem Verhältnis zum vorangehenden Inhalt liegen oder aus dem Fluss des Dokuments herausgenommen sind.

CSS position legt nicht die Position eines Elements innerhalb des Browserfensterns oder Dokuments fest, sondern die Art der Positionierung.

position kann auf alle Elemente angewendet werden und hat sechs mögliche Werte:

static | statisch
Inhalte folgen linear nacheinander, so wie sie im HTML-Dokument einander folgen.
relative | relativ
Zunächst nicht anders als static.
absolute | absolut
Das Element wird aus dem linearen Fluß genommen, sein ursprünglicher Raum kollabiert.
fixed | fest
Wie absolut, aber das Koordinatensystem des fixierten Elements ist der Viewport, nicht mehr das Dokument. Das Element wird nicht mehr mit dem Dokument gescrollt.
sticky | festgesteckt
Wie fixed, aber das Element scrollt bis zu einem vorgegebenen Punkt und bleibt dann im Viewport fixiert
inherit | geerbt
Das Element erbt die Art der Positionierung von seinem umfassenden Element.

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.

1
top / bottom ändern
left / right ändern
Höhe ändern
Box 1 ändern

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.

flowers
Sag es mit Blumen
Tag der offenen Tür

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

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.

position:absolute

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.

Ausprobieren?

Wo das Ding jetzt gelandet ist? Keine Ahnung. Das ist dein Monitor. Irgendwo ganz oben. Du kannst mal raufscrollen und suchen …

Positionieren für Layout

Obwohl CSS position so klingt, als wäre es die Technik der Wahl für das Layout von Webseiten, wurde CSS float schnell zur bevorzugten Technik für das Layout von Webseiten. CSS position hingegen ist 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. position: fixed und position: sticky fallen eher in die Rubrik der Effekte für die Benutzerschnittstelle.

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.

Für das Layout werden display:flex und display:grid das trickreiche float ablösen.

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

position static absolute fixed sticky relative