position: fixed – für Elemente, die immer sichtbar sein sollen

Fixiert für feststehende Elemente: Footer, Scroll-Up-Buttons

Elemente mit CSS position: fixed und position: absolute verhalten sich fast gleich. Erst wenn der Benutzer das Browserfenster scrollt, zeigt sich der Unterschied:

• Ein absolut positionierter Block liegt relativ zu seinem Container oder zum HTML-Dokument und wandert mit, wenn der Benutzer scrollt.
• Ein fixierter Block sitzt immer fest im Viewport des Browserfensters positioniert, ignoriert position:relative des Eltern-Elements und bewegt sich nicht vom Platz.

position: fixed ist ein Kandidat für die Navigationsleiste, häufiger auch für die Fußleiste einer Webseite. Eine weitere Anwendung für eine fixierte Position im Browserfenster ist der »Scroll nach oben«-Button, der meist im unteren Bereich der rechten Seite des Dokuments fixiert wird.

Weil ein fixiertes Element immer im Viewport bleibt, hat der Besucher immer Zugriff auf die Links der Navigation oder Fußleiste.

position: fixed – visuelles Beispiel

Im Beispiel liegen 3 Blöcke im Quelltext nacheinander, der fixierte Block (rot, an Position 2 im Beispiel) zeigt sich nicht im Fluß des Inhalts, sondern ist – wie ein absolut positioniertes Element – aus seiner ursprünglichen Position herausgenommen. Die umgebenden Elemente verhalten sich so, als wäre der fixierte Block nicht vorhanden und die nachfolgenden Elemente rücken auf.

<div>
   <div class="static">static: keine Positionierung</div>
   <div class="fixed"><p>position:fixed</p></div>
   <div class="static">static: keine Positionierung</div>
</div>

Ohne Angabe der Position durch top, left, right, bottom ist der mittlere Block mit position:fixed nicht im Viewport sichtbar.

.static {
   width: 300px; 
   background: gray;
}
.fixed {
   position: fixed; 
   width:300px; 
   background: orange; 
}

Wie ein absolut positionierter Block legt sich das Element mit position: fixed über den Inhalt und hinterläßt keine Lücke, wenn es wieder entfernt wird.

position: sticky

position relative und absolut gehören zur alten Garde der Positionierung mit CSS und auch position: fixed ist eine etablierte Eigenschaft. position sticky ist erst später hinzugekommen, wird aber heute von allen modernen Browsern unterstützt.

Während ein Element mit fixed von Anfang an eine feste Position im ViewPort einnimmt, scrollen Blöcke mit CSS position sticky mit dem Inhalt, bis sie eine bestimmte Position erreichen und werden dann erst fixiert.

Den Effekt von sticky sehen wir häufig bei den oberen Menüleisten von Webseiten.

Wenn sich positionierte Blöcke überlappen: z-index

Wenn Blöcke positioniert werden – sei es durch position: absolute, sticky oder fixed – können sie einander überlappen. Sie liegen dann in der Reihenfolge übereinander, in der sie im Markup erscheinen. Die CSS-Eigenschaft z-index ändert diese Stapelreihenfolge: Der höhere z-index befördert einen positionierten Block "nach oben".