1. Positioning mode

First, let’s take a look at some basic features of the three positioning modes in CSS: absolute positioning, relative positioning, and floating positioning

  • Relative positioning

    • Relatively positioned elements appear in the normal document flow
    • You can move elements relative to the starting point by setting vertical or horizontal positions
    • The element still occupies the original space, whether or not it is moved
    • Because relatively positioned elements occupy the original space, moving elements can overwrite other elements on the page

  • Absolute positioning

    • Absolutely positioned elements are completely removed from the document flow, so they do not take up space in the document flow
    • By setting a vertical or horizontal position, you can move an element relative to the closest positioned ancestor element
    • If there are no located ancestor elements, move relative to the original contain block
    • Because absolutely positioned elements are independent of the document flow, they can override other elements on the page

  • Floating positioning

    • Float positioned elements that are not part of the document flow can be moved around until they hit the include box or another float box
    • You can use the float property to define which side the element floats to
    • You can use the clear attribute to define which side of an element does not allow other floating elements
    • You can use the visibility attribute to specify whether an element is visible

2. Location properties

We can specify the positioning type using the Position property

The position property determines the distance to be moved with the following properties, which take a length or percentage value, or set to Auto

  • Top: Defines the offset between the upper margin of an element and the upper margin of its containing block
  • Right: Defines the offset between the right margin of the element and the right margin of the containing block
  • Bottom: Defines the offset between the lower margin of the element and the lower margin of the containing block
  • Left: Defines the offset between the left margin of the element and the left margin of the containing block

Optional values for the Position property are as follows:

  • Static: Default, positioning is not set, elements will appear in normal flow

    The left, top, right, and bottom attributes are ignored

  • Absolute: Absolute, relative to the first parent element other than static

    The location is specified by the left, top, right, and bottom attributes

  • Fixed: indicates the absolute positioning relative to the browser window

    The location is specified by the left, top, right, and bottom attributes

  • Relative: relative to a normal position

    The location is specified by the left, top, right, and bottom attributes

  • Inherit: Inherit from the parent element

Now, you can try changing the position property and see what happens to their style

<! DOCTYPEHTML>
<html>
<head>
    <style>
        div {
            /* Optional values of position property: static, absolute, fixed, relative */
            position: static;
        }
        .green-div {
            background: green;
            width: 300px;
            height: 300px;
            top: 50px;
            left: 50px;
        }
        .yellow-div {
            background: yellow;
            width: 100px;
            height: 100px;
            top: 25px;
            left: 25px;
        }
        .red-div {
            background: red;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="green-div">
        <div class="yellow-div"></div>
        <div class="red-div"></div>
    </div>
</body>
</html>
Copy the code

All right, answer!

  • When position is static, the style looks like this:

When position is static, the element is not positioned, and the left, top, right, and bottom attributes are invalid

Therefore, the green block will be displayed directly, and the yellow and red blocks will also be displayed in the green block as normal document flow because they are child elements of the green block

  • When position is absolute, the style looks like this:

When position is absolute, elements are absolutely positioned and will be removed from the normal document flow

At the same time, absolute specifies that an element that is absolutely positioned is positioned relative to the first parent element that is not static

Because the parent element of the green block is the window, the green block is 50 px from the top edge of the window and 50 px from the left edge of the window

Because the parent element of the yellow block is the green block, the yellow block is 25 px from the upper edge of the green block and 25 px from the left edge of the green block

Because the parent element of the red block is the green block, the red block is 50 px from the upper edge of the green block and 50 px from the left edge of the green block

  • When position is fixed, the style looks like this:

When position is fixed, elements are absolutely positioned and will be removed from the normal document flow

Meanwhile, fixed specifies absolute positioning of elements relative to the browser window, so

The green block is 50 px from the top and 50 px from the left edge of the browser window

The yellow block is 25 px away from the top edge of the browser window and 25 px away from the left edge of the browser window

The red block is 50 px from the top edge of the browser window and 50 px from the left edge of the browser window

  • When position is relative, the style effect is as follows:

When position is relative, elements are in relative position and always occupy their original positions regardless of whether they move

Meanwhile, relative dictates that the relative position of the element is relative to its original position, so

The green block is 50 px from the upper boundary and 50 px from the left boundary of the original position

The yellow block is 25 px from the upper boundary of the original position and 25 px from the left boundary of the original position

The red block is 50 px away from the upper boundary and 50 px away from the left boundary