Relative Positioning

Part of the Styling with CSS section of Coddy's HTML journey — lesson 56 of 76.

In CSS, relative positioning is a positioning scheme that allows you to position an element relative to its normal position in the document flow. When an element is set to position: relative;, it remains in the normal flow, but you can then use the top, right, bottom, and left properties to offset it from its original position.

Here's the basic syntax for using relative positioning:

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

position: relative;: This declaration sets the element's positioning scheme to relative.
top, right, bottom, left: These properties specify the offset of the element from its normal position. You can use positive or negative values, specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

For example:

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

In this example, the element with the class box will be positioned 20 pixels down and 30 pixels to the right of its normal position in the document flow. The space it originally occupied will be preserved, and other elements will not flow into that space.

Challenge

Easy

You are given an HTML document with a division (<div>) that contains three child divisions (<div>) with the classes box1, box2, and box3. Your task is to use relative positioning to move the box2 element. Follow the steps below:

Write a CSS rule that targets the <div> element with the class box2.
Set the position property of the .box2 element to relative.
Set the top property of the .box2 element to 20px and the left property to 40px. This will move the box 20 pixels down and 40 pixels to the right of its normal position.

Cheat sheet

Relative positioning allows you to position an element relative to its normal position in the document flow using position: relative;:

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

The element remains in the normal flow, but you can offset it using top, right, bottom, and left properties. The original space is preserved.

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

This moves the element 20px down and 30px right from its normal position.

Try it yourself

<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>