Fixierte Positionierung

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

In CSS sorgt eine feste Positionierung dafür, dass ein Element unabhängig davon, wie weit du scrollst, an derselben Stelle auf dem Bildschirm bleibt. Wenn du position: fixed; festlegst, wird das Element aus dem normalen Layout entfernt, sodass andere Elemente es ignorieren. Es bleibt am Browserfenster fixiert, wodurch es für Kopfbereiche, Fußbereiche oder Menüs nützlich ist, die immer sichtbar sein sollen.

Hier ist die grundlegende Syntax für die Verwendung einer festen Positionierung:

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.

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>