Positioning Basics

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

In CSS, positioning is a set of properties that allow you to control the position of elements on a web page. By default, elements are positioned according to the normal flow of the HTML document. However, with CSS positioning, you can take elements out of the normal flow and place them in specific locations relative to their containing element or the viewport (the visible area of the browser window).

There are several values for the position property, each with its own behavior:

static: This is the default value. The element is positioned according to the normal flow of the document. The top, right, bottom, and left properties have no effect.

relative: The element is positioned relative to its normal position. Setting the top, right, bottom, and left properties will move the element away from its normal position, but it still occupies space in the normal flow.

absolute: The element is removed from the normal flow and positioned relative to its nearest positioned ancestor (an ancestor with a position other than static). If no positioned ancestor is found, it is positioned relative to the initial containing block (usually the viewport).

fixed: The element is removed from the normal flow and positioned relative to the viewport. It remains fixed in place even when the page is scrolled.

Here's the basic syntax for using the position property:

selector {
    position: value;
}

value: The desired positioning behavior (e.g., static, relative, absolute, fixed, sticky).

Challenge

Easy

You are given an HTML document with a parent division (<div>) that contains one child division (<div>). Your task is to use the position property to change the positioning context of the elements. Follow the steps below:

Write a CSS rule that targets the <div> element with the class container. Set its position property to relative. This will make it a positioned ancestor for its children.
Write a CSS rule that targets the <div> element with the class box. Set its position property to absolute. This will take it out of the normal flow and allow you to position it relative to its nearest positioned ancestor (the container).
Set the top property of the .box element to 50px and the left property to 100px. This will position the box 50 pixels from the top and 100 pixels from the left of its positioned ancestor (the container).

Cheat sheet

The position property controls how elements are positioned on a web page:

selector {
    position: value;
}

Position values:

static: Default positioning in normal document flow
relative: Positioned relative to its normal position, still occupies space in flow
absolute: Removed from normal flow, positioned relative to nearest positioned ancestor
fixed: Removed from normal flow, positioned relative to viewport, stays fixed when scrolling

Use top, right, bottom, and left properties to adjust position (except with static).

Try it yourself

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>