Fixierte Position

Ein Element mit position: fixed wird, genau wie ein absolutes, aus dem normalen Fluss genommen. Seine Verschiebungen werden jedoch immer von den Rändern des Browserfensters aus gemessen, nicht von der Seite oder einem Vorfahren. Deshalb bleibt es an derselben Stelle auf dem Bildschirm, auch wenn du die Seite scrollst.

Wir verwenden die fixierte Position für Dinge, die immer griffbereit sein sollen: einen Button, der dich nach oben bringt, einen Chat-Button oder eine Leiste mit einer Nachricht am unteren Rand des Fensters.

Am Ende der Katzenseite haben wir einen Link hinzugefügt, der dich nach oben bringt:

<a href="#" class="nach-oben">Nach oben</a>

Wie du aus dem HTML-Kurs weißt, scrollt ein Link auf # die Seite ganz nach oben. Im Stylesheet haben wir den Link wie einen Button gestaltet.

Damit du das Scrollen ausprobieren kannst, haben wir die Seite außerdem höher gemacht: In der Regel für body sagt min-height: 200vh, dass die Seite mindestens doppelt so hoch sein muss wie das Fenster. Die Eigenschaft min-height legt die Mindesthöhe fest: Anders als height lässt sie das Element höher werden, wenn sein Inhalt mehr Platz braucht.