Fixierte Positionierung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 58 von 76.

In CSS behält die fixierte Positionierung ein Element an der gleichen Stelle auf dem Bildschirm bei, egal wie weit man scrollt. Wenn man position: fixed; festlegt, wird das Element aus dem normalen Layout entfernt, sodass andere Elemente es ignorieren. Es bleibt am Browserfenster fixiert, was es nützlich für Header, Footer oder Menüs macht, die immer sichtbar sein sollten.

Hier ist die grundlegende Syntax für die Verwendung der fixierten Positionierung (fixed positioning):

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Diese Deklaration legt das Positionierungsschema des Elements auf fixed fest.

top, right, bottom, left: Diese Eigenschaften geben die Position des Elements relativ zum Viewport an. Sie können positive oder negative Werte verwenden, angegeben in Pixeln (px), Ems (em), Prozent (%) oder anderen gültigen CSS-Einheiten.

Zum Beispiel:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

In diesem Beispiel ist das Element mit der Klasse header mit position: fixed;, top: 0; und left: 0; am oberen Rand des Viewports fixiert.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Header (<div>) und einem Absatz (<p>). Ihre Aufgabe ist es, die fixierte Positionierung zu verwenden, damit der Header am oberen Rand des Viewports bleibt, auch wenn die Seite gescrollt wird. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse header anspricht.
Setzen Sie die Eigenschaft position des .header-Elements auf fixed.
Setzen Sie die Eigenschaft top des .header-Elements auf 0 und die Eigenschaft left auf 0. Dies positioniert den Header in der oberen linken Ecke des Viewports.
Setzen Sie die Eigenschaft width des .header-Elements auf 100%, damit es sich über den gesamten Viewport erstreckt.
Setzen Sie die Eigenschaft background-color des .header-Elements auf #fcc726 (Goldgelb), damit es sich vom Seiteninhalt abhebt.
Setzen Sie die Eigenschaft text-align auf center, damit es besser aussieht.

Spickzettel

Die fixierte Positionierung hält ein Element an derselben Stelle auf dem Bildschirm, unabhängig vom Scrollen. Das Element wird aus dem normalen Layoutfluss entfernt.

Grundlegende Syntax:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Beispiel – Fixieren eines Elements oben links im Viewport:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Positionseigenschaften (top, right, bottom, left) geben die Position des Elements relativ zum Viewport an und akzeptieren Werte in Pixeln, Ems, Prozenten oder anderen CSS-Einheiten.

Probier es selbst

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>