Grundlagen der Positionierung

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

In CSS ist die Positionierung eine Reihe von Eigenschaften, mit denen du die Position von Elementen auf einer Webseite steuern kannst. Standardmäßig werden Elemente entsprechend dem normalen Fluss des HTML-Dokuments positioniert. Mit der CSS-Positionierung kannst du Elemente jedoch aus dem normalen Fluss herausnehmen und sie an bestimmten Stellen relativ zu ihrem übergeordneten Element oder zum Ansichtsfenster (dem sichtbaren Bereich des Browserfensters) platzieren.

Für die Eigenschaft position gibt es mehrere Werte, von denen jeder sein eigenes Verhalten hat:

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

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

absolute: Das Element wird aus dem normalen Fluss entfernt und relativ zu seinem nächsten positionierten Vorfahren positioniert (einem Vorfahren mit einer anderen Position als static). Wenn kein positionierter Vorfahr gefunden wird, wird es relativ zum ursprünglichen umgebenden Block positioniert (in der Regel zum Ansichtsfenster).

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

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

selector {
    position: value;
}

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

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einer übergeordneten Division (<div>), die eine untergeordnete Division (<div>) enthält. Deine Aufgabe besteht darin, die Eigenschaft position zu verwenden, um den Positionierungskontext der Elemente zu ändern. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das <div>-Element mit der class container abzielt. Setze seine Eigenschaft position auf relative. Dadurch wird es zu einem positionierten Vorfahren für seine untergeordneten Elemente.
Schreibe eine CSS-Regel, die auf das <div>-Element mit der class box abzielt. Setze seine Eigenschaft position auf absolute. Dadurch wird es aus dem normalen Fluss genommen und du kannst es relativ zu seinem nächsten positionierten Vorfahren (dem container) positionieren.
Setze die Eigenschaft top des Elements .box auf 50px und die Eigenschaft left auf 100px. Dadurch wird die Box 50 Pixel vom oberen Rand und 100 Pixel vom linken Rand ihres positionierten Vorfahren (des container) entfernt positioniert.

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>