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 Browser. Genauso wie ein absolut positionierter Block liegt ein fixierter Block nicht im Fluß des Dokuments.

Elemente mit CSS position: fixed und position: absolute verhalten sich fast gleich. Erst wenn der Benutzer im 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 soll eine Seitenleiste oder die Navigation beim Scrollen mit nach oben laufen, bis sie an den Rand des Browerfensters stößt. Hier soll das sticky-Element stehenbleiben, auch wenn der Benutzer weiterscrollt.

Diese Technik kennen wir bereits aus vielen Webdesigns, aber dieses Verhalten muss bislang noch 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.

Zurzeit nur Safari mit -webkit-Präfix und Firefox. Chrome hat display: sticky nach dem Übergang auf Blink als Rendering Machine vollständig entfernt. Bei Microsoft IE / Edge ist der Support von position: sticky »under consideration«.