Absolute Positioning

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

In CSS, absolute positioning lets you place an element exactly where you want it inside its container.

When you set position: absolute;, the element is removed from the normal layout, so other elements act as if it’s not there. It positions itself based on the nearest ancestor with a set position (not static). If there isn’t one, it positions itself relative to the page.

Here's the basic syntax for using absolute positioning:

.parent {
    position: relative; /* Make the parent a positioned ancestor */
}

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

.parent: The CSS selector that targets the parent element. Setting position: relative; allows absolutely positioned children.

.child: The CSS selector that targets the element you want to position absolutely.

position: absolute;: This declaration sets the element's positioning scheme to absolute, removing it from the normal flow.

top, right, bottom, left: These properties specify the position of the element relative to its nearest positioned ancestor. You can use positive or negative values, specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

For example:

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

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

In this example, the .parent element is set as a positioned ancestor with position: relative;. The .child element is positioned absolutely with position: absolute;, and its position is set to 50 pixels from the top and 100 pixels from the left of its nearest positioned ancestor (the .parent element).

Challenge

Easy

You are given an HTML document with a parent division (<div>) that contains two child divisions (<div>) with the classes box1 and box2. Your task is to use absolute positioning to position the box2 element within the parent. Follow the steps below:

Write a CSS rule that targets the <div> element with the class parent. Set its position property to relative to make it a positioned ancestor.
Write a CSS rule that targets the <div> element with the class box2.
Set the position property of the .box2 element to absolute.
Set the top property of the .box2 element to 30px and the right property to 20px. This will position the box 30 pixels from the top and 20 pixels from the right of its positioned ancestor (the parent).

Cheat sheet

Absolute positioning places an element exactly where you want it inside its container. The element is removed from normal layout flow and positions itself based on the nearest positioned ancestor.

Basic syntax:

.parent {
    position: relative; /* Make the parent a positioned ancestor */
}

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

Example:

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

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

position: absolute; removes the element from normal flow
top, right, bottom, left properties specify position relative to nearest positioned ancestor
Values can be in pixels (px), ems (em), percentages (%), or other CSS units
If no positioned ancestor exists, element positions relative to the page

Try it yourself

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