Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Jeder Webdesigner sollte wissen, wie Elemente auf einer Website gezielt positioniert werden können. Neben der Floating-Technik und modernen CSS-Layoutmodellen wie Flexbox oder dem Grid Layout Module spielt hier die CSS-Eigenschaft position eine entscheidende Rolle. In diesem Beitrag erklären wir die verschiedenen Werte der position-Eigenschaft anhand leicht nachvollziehbarer Beispiele.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

position: static;

position: static ist der Standardwert, den jedes HTML-Element automatisch besitzt. Das HTML-Element befindet sich folglich an seiner Standardposition innerhalb des sog. Dokumentflusses. Die später beschriebenen Eigenschaften left, right, top & bottom, sowie der z-index haben bei einem Element mit position: static keinerlei Wirkung. Man spricht deshalb auch von einem nicht positionierten Element.

Der Wert static wird normalerweise dann verwendet, wenn man ein Element zuvor mit einer der folgenden position-Werte positioniert hat und den Standardzustand wiederherstellen möchte.

position: relative;

Wenn ihr einem Element position:relativ zuweist, positioniert es sich relativ zu seiner Standard-Position, also jener Stelle auf der Website, die es ohne Positionierungsangaben einnehmen würde. Wir können das Element mithilfe der CSS-Eigenschaften left, right, top & bottom von dort aus verschieben.

.element {
  position: relative;
  left: 100px;
  top: 100px; 
}

Andere Elemente berücksichtigen bei ihrer Positionierung weiterhin die ursprüngliche Position des verschobenen Elements, nicht die sichtbare.

Beispiel anschauen

position: absolute;

Wenn ihr ein Element mit position:absolute; positioniert, orientiert es sich am nächst höheren Eltern-Element, das nicht den Standardwert position: static trägt. Gibt es ein solches Element nicht, orientiert es sich am HTML-Element body. Das absolut positionierte Element wird darüber hinaus dem Dokumentfluss entnommen. Andere Elementen rutschen daher in den freigewordenen Platz.

.element {
  position: absolute;
  bottom: 0;
  right: 0; 
}

Beispiel anschauen

position: fixed;

Wenn ihr ein Element mit position: fixed; positioniert, orientiert es sich am Browserfenster. Wie bei position:absolute; wird es dem Dokumentfluss entnommen, was dazu führt, dass nachfolgende Elemente in den freigewordenen Platz rutschen. Zusätzlich sorgt position: fixed dafür, dass das Element beim Scrollen an Ort und Stelle bleibt. So kann man z. B. eine Navigationsleiste für den Nutzer permanent sichtbar machen.

.element {
  position: fixed;
  top: 0; 
left: 0;
}

Beispiel anschauen

position: sticky;

Die Positionierungsart position: sticky ist ein Hybrid der zwei Eigenschaften position: relative und position: fixed. Das Element scrollt solange mit, bis es mit einer seiner Kanten eine der über top, right, bottom oder left angegebenen Koordinaten erreicht. Üblicherweise wird die top-Eigenschaft verwendet, da wird im Regelfall eine Website von oben nach unten scrollen.

Sobald der Wert erreicht ist, verhält sich das Element als wäre es mit position:fixed; positioniert worden. Es bleibt also beim Scrollen stehen.

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

Beispiel anschauen

Wenn position: sticky; vermeintlich nicht funktioniert, prüft einmal ob ein Elternelement des Objekts overflow:hidden; zugewiesen bekommen hat. Das kann die Sticky-Funktion beeinträchtigen.

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: