Absolute Positionierung

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

In CSS ermöglicht die absolute Positionierung, ein Element genau dort zu platzieren, wo Sie es innerhalb seines Containers 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

Ihnen wird ein HTML-Dokument mit einem übergeordneten Bereich (<div>) gegeben, der zwei untergeordnete Bereiche (<div>) mit den Klassen box1 und box2 enthält. Ihre Aufgabe ist es, die absolute Positionierung zu verwenden, um das box2-Element innerhalb des parent zu positionieren. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse parent abzielt. Setzen Sie dessen position-Eigenschaft auf relative, um es zu einem positionierten Vorfahrenelement zu machen.
Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse box2 abzielt.
Setzen Sie die position-Eigenschaft des .box2-Elements auf absolute.
Setzen Sie die top-Eigenschaft des .box2-Elements auf 30px und die right-Eigenschaft auf 20px. Dies positioniert die Box 30 Pixel vom oberen Rand und 20 Pixel vom rechten Rand ihres positionierten Vorfahrenelements (dem parent) entfernt.

Spickzettel

Die absolute Positionierung platziert ein Element genau dort, wo Sie es innerhalb seines Containers haben möchten. Das Element wird aus dem normalen Layoutfluss entfernt und positioniert sich basierend auf dem nächsten positionierten Vorfahrenelement.

Grundlegende Syntax:

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

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

Beispiel:

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

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

position: absolute; entfernt das Element aus dem normalen Fluss
Die Eigenschaften top, right, bottom und left geben die Position relativ zum nächsten positionierten Vorfahrenelement an
Werte können in Pixeln (px), Ems (em), Prozent (%) oder anderen CSS-Einheiten angegeben werden
Wenn kein positioniertes Vorfahrenelement existiert, positioniert sich das Element relativ zur Seite

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>