Although the floating layout is flexible, it is not easy to control. The emergence of positioning layout makes it possible for users to accurately locate the elements in the page, and the page layout is also arbitrary. However, the lack of flexibility of positioning layout brings confusion to the layout with uncertain space size and location, so in practical development, we should use these two layouts flexibly.

The positioning layout is implemented using the Position property, which has the following values:

Attribute values instructions
fixed Fixed position
relative Relative positioning
absolute Absolute positioning
static Static positioning (default)

First, fixed positioning

The realization of fixed positioning: position:fixed; , fixed elements do not change their position as the scroll bar is dragged. Use the top, bottom, left, and right attributes together to specify the position of the element relative to the browser. These four attributes are generally used only in two, and the reference values are the four edges of the browser.

Examples are as follows:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            .div1{
                height: 2000px;
                width: 200px;
                background-color: rgb(141.212.120);
                display: table-cell;
                vertical-align: middle;
            }
            .div2{
                height: 100px;
                width: 100px;
                position: fixed;
                background-color: darkseagreen;
                top: 100px;
                left:300px;
            }
        </style>
    </head>
    <body>
        <div class="div1">No element is set for positioning</div>
        <div class="div2">Sets the positioning element</div>
    </body>
</html>
Copy the code

The right div stays the same as the scroll bar scrolls, the left div changes:

One of the most common applications for fixed positioning is the back to the top button.

Two, relative positioning

The realization of relative positioning: position:relative; Relative positioning refers to the calculation of the position of an element relative to the original position. It can also be used with four attributes, top, bottom, left and right, usually two.

Fixed positioning is relative to the browser, and absolute positioning is relative to the element itself.

When neither div is positioned:

Now, leaving the first div unchanged, set the relative position for the second div:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            .div1{
                height: 100px;
                width: 200px;
                background-color: rgb(141.212.120);
            }
            .div2{
                height: 100px;
                width: 200px;
                background-color: darkseagreen;
                position: relative;
                top: 20px;
                left:20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </body>
</html>
Copy the code

As you can see, the element is offset from its original position:

Let’s add a div3 with no positioning:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            .div1..div3{
                height: 100px;
                width: 200px;
                background-color: rgb(141.212.120);
            }
            .div2{
                height: 100px;
                width: 200px;
                background-color: darkseagreen;
                position: relative;
                top: 20px;
                left:20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </body>
</html>
Copy the code

It looks like this in the browser:

As you can see from the figure above, although the second div is offset from its original position, it still occupies the same position as when it was not offset and does not affect the document flow, and the elements that follow it remain in the same order as the original document flow.

Three, absolute positioning

Position: Absolute; When absolute positioning is used, this element is removed from the document flow and other elements treat it as if it does not exist. This property is also used in conjunction with the top, bottom, left, and right properties, usually only two, with the reference objects being the four edges of the browser.

For example, div2 is absolute:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            .div1..div3{
                height: 100px;
                width: 200px;
                background-color: rgb(141.212.120);
                border: 1px solid black;
            }
            .div2{
                height: 50px;
                width: 50px;
                background-color: azure;
                position: absolute;
                top: 50px;
                left:50px;
            }
        </style>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </body>
</html>
Copy the code

It looks like this in the browser:

As you can see from the figure above, absolute positioning div2 has been removed from the document flow without affecting the arrangement of other elements.

Four, static positioning

By default, elements are statically positioned, that is, they appear normally in the standard document flow and do not apply to their top, bottom, left, or right.