Relative Positionierung

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

In CSS ist die relative Positionierung ein Positionierungsschema, mit dem du ein Element relativ zu seiner normalen Position im Dokumentfluss positionieren kannst. Wenn ein Element auf position: relative; gesetzt ist, bleibt es im normalen Fluss, aber du kannst anschließend die Eigenschaften top, right, bottom und left verwenden, um es von seiner ursprünglichen Position zu versetzen.

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

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: relative;: Diese Deklaration legt das Positionierungsschema des Elements auf relativ fest.
top, right, bottom, left: Diese Eigenschaften geben den Versatz des Elements von seiner normalen Position an. Du kannst positive oder negative Werte verwenden, angegeben in Pixeln (px), Ems (em), Prozentwerten (%) oder anderen gültigen CSS-Einheiten.

Zum Beispiel:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

In diesem Beispiel wird das Element mit der Klasse box 20 Pixel nach unten und 30 Pixel nach rechts von seiner normalen Position im Dokumentfluss positioniert. Der Raum, den es ursprünglich eingenommen hat, bleibt erhalten, und andere Elemente werden nicht in diesen Raum fließen.

Aufgabe

Einfach

Dir wird ein HTML-Dokument mit einer Division (<div>) gegeben, die drei untergeordnete Divisionen (<div>) mit den Klassen box1, box2 und box3 enthält. Deine Aufgabe besteht darin, die Positionierung relativ zu verwenden, um das Element box2 zu verschieben. Befolge die folgenden Schritte:

Schreibe eine CSS-Regel, die auf das <div>-Element mit der Klasse box2 abzielt.
Setze die position-Eigenschaft des Elements .box2 auf relative.
Setze die top-Eigenschaft des Elements .box2 auf 20px und die left-Eigenschaft auf 40px. Dadurch wird die Box 20 Pixel nach unten und 40 Pixel nach rechts von ihrer normalen Position verschoben.

Probier es selbst

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>