position: fixed

Feststehende Elemente

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 fest im Viewport des Browserfensters und bewegt sich nicht vom Platz.

position: fixed ist ein guter Kandidat für die Navigationsleiste, manchmal auch für die Fußleiste einer Webseite. Weil ein fixiertes Element immer im Viewport bleibt, hat der Besucher immer Zugriff auf die Links der Navigation oder Fußleiste.

position: fixed

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.

Ohne Angabe der Position durch top, left, right, bottom ist der Block nicht im Viewport sichtbar.

.static {
   width: 300px; height:40px; background: gray;
}
.fixed {
   position: fixed; width:300px; height:100px; background: red; 
}

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

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. Mit CSS3 ist noch position sticky hinzugekommen.

Während ein Element mit fixed von Anfang an eine feste Position 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.