CSS, HTML und Javascript mit {stil}

position: fixed / position: sticky

CSS Positionieren: 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.

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

Der fixierte Block (rot, an Position 2 im Beispiel) liegt nicht mehr 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
static: keine Positionierung

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>

Sichtbar machen?

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: -webkit-sticky;
       position: sticky;
       top: 0;
   }
   nav .topmenu {
       display: -ms-flexbox;
       display: flex; 
       -ms-flex-pack: justify;
       justify-content:space-between; 
       -ms-flex-wrap: wrap;
       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 … Bei Microsoft IE / Edge steckt der Support von position: sticky »under consideration«.

position fixed