Layout SVG

CSS: position fixed vs. position sticky

Zuletzt bearbeitet am: 13.10.2021

Mit den CSS Eigenschaften position fixed und position sticky ist es möglich Elemente an einer fest definierten Position innerhalb eines Scrollcontainers oder des Viewports zu fixieren. In diesem Beitrag werden die jeweiligen Eigenschaften kurz erklärt, sowie die Vor- und Nachteile beleuchtet.

Image by Fab Lentz (https://unsplash.com/photos/mRMQwK513hY)

Image by Fab Lentz (https://unsplash.com/photos/mRMQwK513hY)

Position fixed kurz erläutert

Ein Element mit der Eigenschaft position: fixed; wird in Bezug auf den Viewport oder das Browserfenster selbst angezeigt. Es bleibt immer an der selben, fest definierten Position, auch wenn der Viewport gescrollt wird. Es hat keinen Einfluss auf den Fluss anderer Elemente innerhalb des Containers d.h. es nimmt keinen bestimmten Platz ein. Das trifft selbst dann zu wenn das Element innerhalb eines anderen Containers als Child-Element definiert ist.

Position sticky kurz erläutert

Ein Element mit der Eigenschaft position: sticky; verhält sich im erstem Moment wie ein relativ positioniertes Element. Sobald es über einen bestimmten Offset hinaus gescrollt wird, in Normalfall ist dies der obere Rand des Viewports, erhält es im Grunde die Eigenschaften von Position fixed. Doch im Gegensatz zu Position fixed wirkt sich das Element auf den Fluss der anderen Elemente auf der Seite aus, d.h. es nimmt einen bestimmten Platz auf der Seite ein (genau wie position: relative;). Wenn das Element als Child definiert ist, wird es in Bezug auf seinen Parent positioniert.

Beim zurückscrollen, über den Offset hinaus, nimmt das Element wieder die relativen Eigenschaften an, es kehrt also zu seiner ursprünglichen Position zurück.

Die Unterschiede

position fixed

position sticky

Die Unterschiede zwischen Position fixed und Position sticky können auf zwei wesentliche Punkte reduziert werden: 1. Ihr Verhalten gegenüber anderen Elementen im selben Container. Position fixed löst das Element aus dem Fluss des Parent-Containers und wirkt sich somit nicht auf andere Elemente aus (wie position: absolute;). Position sticky verhält sich genau Gegenteilig. Das Sticky-Element ist gewissermaßen von den Eigenschaften seines Parents abhängig.
2. Wie oder besser wann die Elemente fixiert werden. Das mit fixed positionierte Element hat seine Eigenschaft von Anfang an, das Sticky-Element hingegen erst wenn über einen bestimmten Punkt hinaus gescrollt wurde.

Die Vor- und Nachteile von Position fixed

Vorteil: Das Element ist nicht von seinem Parent abhängig und bleibt somit immer bis zum Ende des Viewports an der definierten Position fixiert.

Nachteil: Da das Element aus dem Fluss des Containers herausgenommen wird, es also keinen Einfluss auf andere Elemente hat, kommt es zur Überlappung. Der Content liegt unterhalb des fixierten Elements. Dieses Problem kann man leicht beheben, indem man z.B. mittels der Porpertys margin oder top den Abstand zwischen dem fixierten Element und dem darunter liegenden wieder ausgleicht.

<html>
  <body>
   <header class="fixed-header">
      Ich bin ein fixierter Header.
   </header>
   <div class="content">
     Ich bin Content.
   </div>
  </body>
</html> 
.fixed-header {
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  margin-top: 80px;
}

Die Vor- und Nachteile von Position sticky

Vorteil: Was früher nur durch das umständliche Schreiben von einigen Zeilen JavaScript o.ä. erreicht werden konnte, ist heute durch eine einzige CSS-Eigenschaft möglich. So gut wie alle modernen Browser unterstützen position: sticky;. Es können also Aufwand und Codezeilen eingespart werden.

Nachteil: Da das Sticky-Element abhängig von den Eigenschaften seines Parents ist, ist es auch nur so lange fixiert bis beim Scrollen das Ende des Parent-Containers erreicht wird.

Fazit

Letztendlich haben beide Eigenschaften ihre Daseinsberechtigung. Das heißt sowohl Position fixed als auch sticky erfüllen ihren jeweiligen Zweck. Von daher sollte man sich vorab überlegen, was man erreichen möchte. Beispiel: Ist das zu fixierende Element im DOM als Child-Element definiert und/oder es soll sich von Anfang an einer fest definierten Position befinden, dann lohnt sich der Einsatz von position: fixed;. Möchte man, dass das Element erst beim Scrollen fixiert wird und das es seinen Einfluss auf seine Siblings behält, dann ist der Einsatz von position: sticky; von Vorteil.

Quellen/Verweise

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Hat dir der Beitrag gefallen?

Dann lass gerne einen Like da.

x
Vielen Dank für deine Bewertung
Layout SVG Bottom

Kommentar verfassen

Deine Email-Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet

Layout SVG Bottom