Absolute Positionierung

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

In CSS können Sie ein Element durch absolute Positionierung genau dort innerhalb seines Containers platzieren, wo Sie es haben möchten.

Wenn Sie position: absolute; festlegen, wird das Element aus dem normalen Layout entfernt, sodass sich andere Elemente so verhalten, als wäre es nicht vorhanden. Es positioniert sich relativ zum nächsten Vorfahrenelement mit einer gesetzten Position (nicht static). Falls kein solches Element existiert, positioniert es sich relativ zur Seite.

Hier ist die grundlegende Syntax für die Verwendung der absoluten Positionierung:

.parent {
    position: relative; /* Machen Sie das Elternelement zu einem positionierten Vorfahren */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Der CSS-Selektor, der das Elternelement anspricht. Das Setzen von position: relative; ermöglicht absolut positionierte Kindelemente.

.child: Der CSS-Selektor, der das Element anspricht, das Sie absolut positionieren möchten.

position: absolute;: Diese Deklaration setzt das Positionierungsschema des Elements auf absolut und entfernt es aus dem normalen Fluss.

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

Zum Beispiel:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

In diesem Beispiel wird das .parent-Element als positioniertes Vorfahrenelement mit position: relative; festgelegt. Das .child-Element wird absolut mit position: absolute; positioniert, und seine Position wird auf 50 Pixel von oben und 100 Pixel von links von seinem nächsten positionierten Vorfahrenelement (dem .parent-Element) festgelegt.

Aufgabe

Einfach

Du erhältst ein HTML-Dokument mit einem übergeordneten Bereich (<div>), der zwei untergeordnete Bereiche (<div>) mit den Klassen box1 und box2 enthält. Deine Aufgabe besteht darin, die absolute Positionierung zu verwenden, um das Element box2 innerhalb von parent zu positionieren. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die das <div>-Element mit der Klasse parent auswählt. Setze seine position-Eigenschaft auf relative, um es zu einem positionierten Vorfahren zu machen.
Schreibe eine CSS-Regel, die das <div>-Element mit der Klasse box2 auswählt.
Setze die position-Eigenschaft des Elements .box2 auf absolute.
Setze die top-Eigenschaft des Elements .box2 auf 30px und die right-Eigenschaft auf 20px. Dadurch wird der Bereich 30 Pixel vom oberen Rand und 20 Pixel vom rechten Rand seines positionierten Vorfahren (des Elements parent) entfernt positioniert.

Probier es selbst

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>