position: fixed
Ein Block mit position: fixed ist im Viewport fixiert – dem sichtbaren Ausschnitts des Dokuments im Browserfenster. Genauso wie ein absolut positionierter Block liegt ein fixierter Block nicht im Fluß des Dokuments.
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 fest im Viewport des Browserfensters 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
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.
position:fixed
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.
