position: fixed / position: sticky

CSS position:fixed, position:sticky

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.

position: sticky läßt den Block scrollen, bis er eine bestimmte Position erreicht, um z.B. das Navigationsmenü am oberen Rand des Browserfensters einzuklinken.

18-12-15 SITEMAP

Feststehende Element

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.

static: keine Positionierung

position:fixed

static: keine Positionierung

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

Sichtbar machen?

.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>

position: sticky

Mit position: sticky läuft eine Seitenleiste oder das Navigationsmenü beim Scrollen mit nach oben, bis sie an den Rand des Browerfensters stoßen. Hier bleibt das sticky-Element stehen, auch wenn der Benutzer weiterscrollt.

Diese Technik kennen wir bereits aus vielen Webdesigns, aber das Verhalten musste mit Javascript programmiert werden. position: sticky ist neu in CSS3 und verlagert das Verhaltensmuster ins reine CSS.

Wir stecken
gleich
fest
@media (min-width: 720px) {
   nav.top {
       position: sticky;
       top: 0;
   }
   nav .topmenu {
       display: flex; 
       -ms-flex-pack: justify;
       justify-content:space-between; 
       flex-wrap: wrap;
   }
}

setzt die obere Navigationsleiste – das Topmenü – fest, sobald das Menü an die obere Kante des Browserfensters stößt.

position: sticky war in Chrome zwischenzeitlich in Ungnade gefallen und erst mit Version 56 wieder gnädig aufgenommen. Alle moderenen Browser unterstützen heute position: sticky bis auf … Microsoft Edge hat position: sticky in den letzten Versionen gnädig aufgenommen, IE11 bleibt (wie nicht anders zu erwarten) bis an sein Ende außen vor .

Das leidige sticky für Tabellen

Bis auf Safari verweigern alle Browser die sticky-Eigenschaft bei Tabellen.

HEADER A HEADER B HEADER C
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3
1 2 3

Damit der sticky header bei Tabellen funktioniert, muss der umfassende Container mit overflow: auto versehen sein. Der sticky header braucht zudem top:0.

div.sticky-table {
    height: 200px;  
    overflow: auto;
}

div.sticky-table table {
    width: 100%;
    table-layout: fixed;
}

div.sticky-table thead {
    position: sticky;    
    top: 0;
}