Grundlagen der Positionierung

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

In CSS ist Positionierung eine Reihe von Eigenschaften, mit denen Sie die Position von Elementen auf einer Webseite steuern können. Standardmäßig werden Elemente entsprechend dem normalen Fluss des HTML-Dokuments positioniert. Mit der CSS-Positionierung können Sie jedoch Elemente aus dem normalen Fluss herausnehmen und sie an bestimmten Stellen im Verhältnis zu ihrem umschließenden Element oder dem Viewport (dem sichtbaren Bereich des Browserfensters) platzieren.

Es gibt verschiedene Werte für die position-Eigenschaft, jeder mit seinem eigenen Verhalten:

static: Dies ist der Standardwert. Das Element wird gemäß dem normalen Fluss des Dokuments positioniert. Die Eigenschaften top, right, bottom und left haben keine Auswirkung.

relative: Das Element wird relativ zu seiner normalen Position positioniert. Das Festlegen der Eigenschaften top, right, bottom und left verschiebt das Element von seiner normalen Position weg, aber es nimmt weiterhin Platz im normalen Fluss ein.

absolute: Das Element wird aus dem normalen Dokumentfluss entfernt und relativ zu seinem nächsten positionierten Vorfahrenelement positioniert (ein Vorfahrenelement mit einer anderen Position als static). Wenn kein positioniertes Vorfahrenelement gefunden wird, wird es relativ zum ursprünglichen umschließenden Block (normalerweise dem Viewport) positioniert.

fixed: Das Element wird aus dem normalen Fluss entfernt und relativ zum Viewport positioniert. Es bleibt an seiner Position fixiert, auch wenn die Seite gescrollt wird.

Hier ist die grundlegende Syntax für die Verwendung der position-Eigenschaft:

selector {
    position: value;
}

value: Das gewünschte Positionierungsverhalten (z. B. static, relative, absolute, fixed, sticky).

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem übergeordneten Division-Element (<div>), das ein untergeordnetes Division-Element (<div>) enthält. Ihre Aufgabe ist es, die position-Eigenschaft zu verwenden, um den Positionierungskontext der Elemente zu ändern. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse container anspricht. Setzen Sie dessen position-Eigenschaft auf relative. Dies macht es zu einem positionierten Vorfahren für seine Kindelemente.
Schreiben Sie eine CSS-Regel, die das <div>-Element mit der Klasse box anspricht. Setzen Sie dessen position-Eigenschaft auf absolute. Dies nimmt es aus dem normalen Fluss heraus und ermöglicht es Ihnen, es relativ zu seinem nächsten positionierten Vorfahren (dem container) zu positionieren.
Setzen Sie die top-Eigenschaft des .box-Elements auf 50px und die left-Eigenschaft auf 100px. Dies positioniert die Box 50 Pixel von oben und 100 Pixel von links von ihrem positionierten Vorfahren (dem container).

Spickzettel

Die position-Eigenschaft steuert, wie Elemente auf einer Webseite positioniert werden:

selector {
    position: value;
}

Positionswerte:

static: Standardpositionierung im normalen Dokumentfluss
relative: Relativ zu seiner normalen Position positioniert, nimmt weiterhin Platz im Fluss ein
absolute: Aus dem normalen Fluss entfernt, relativ zum nächsten positionierten Vorfahren positioniert
fixed: Aus dem normalen Fluss entfernt, relativ zum Viewport positioniert, bleibt beim Scrollen fixiert

Verwenden Sie die Eigenschaften top, right, bottom und left, um die Position anzupassen (außer bei static).

Probier es selbst

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>