Relative Positionierung

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

In CSS ist die relative Positionierung ein Positionierungsschema, das es Ihnen ermöglicht, ein Element relativ zu seiner normalen Position im Dokumentfluss zu positionieren. Wenn ein Element auf position: relative; eingestellt ist, bleibt es im normalen Fluss, aber Sie können dann 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. 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:

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

In diesem Beispiel wird das Element mit der Klasse box 20 Pixel unterhalb und 30 Pixel rechts von seiner normalen Position im Dokumentfluss positioniert. Der ursprünglich eingenommene Platz bleibt erhalten, und andere Elemente rücken nicht in diesen Platz nach.

Aufgabe

Einfach

Sie erhalten ein HTML-Dokument mit einem Bereich (<div>), der drei untergeordnete Bereiche (<div>) mit den Klassen box1, box2 und box3 enthält. Ihre Aufgabe ist es, die relative Positionierung zu verwenden, um das box2-Element zu verschieben. Befolgen Sie die folgenden Schritte:

Schreiben Sie eine CSS-Regel, die auf das <div>-Element mit der Klasse box2 abzielt.
Setzen Sie die Eigenschaft position des .box2-Elements auf relative.
Setzen Sie die Eigenschaft top des .box2-Elements auf 20px und die Eigenschaft left auf 40px. Dies verschiebt die Box um 20 Pixel nach unten und 40 Pixel nach rechts von ihrer normalen Position.

Spickzettel

Relative Positionierung ermöglicht es Ihnen, ein Element relativ zu seiner normalen Position im Dokumentenfluss zu positionieren, indem Sie position: relative; verwenden:

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

Das Element bleibt im normalen Fluss, aber Sie können es mit den Eigenschaften top, right, bottom und left versetzen. Der ursprüngliche Platz bleibt erhalten.

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

Dies verschiebt das Element um 20px nach unten und 30px nach rechts von seiner normalen Position.

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>