HTML anchor - absolute and relative positioning, fixed positioning

1, absolute positioning

Absolute positioning refers to a predetermined position by a fixed HTML elements in the horizontal and vertical elements, based on absolute positioning of the element does not occupy the space.

Position statement absolute positioning is relative to the positioned relationship and contains the most recent ancestor element. If the current element is required as the ancestor element is not targeted as a reference value with respect to the entire Web page .

position：absolute；

1 <!DOCTYPE html>

2 <html lang="en">

 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>定位和布局</title>
 9 </head>
10 <style>
11     .big {
12         width: 900px;
13         height: 600px;
14         background-color: black;
15         position: relative;
16     }
17 
18     .box4 {
19         width: 150px;
20         height: 100px;
21         background-color: blue;
22          position: absolute;
23         top: 150px;
24         left: 200px; 
25     }
26 </style>
27 <body>
28     <div class="big">

29         <div class="box4"></div>
30     
31     </div>
32 </body>
33 
34 </html>

As shown, the blue box is large relative to the entire box terms, however, when there is no outer positioning blue box big box package is provided, the blue box will be positioned opposite absolute entire screen.

2, the relative positioning of

position：relative；

The difference between absolute positioning and relative positioning is that it is not the top-left corner of the reference point of origin, but the element itself original starting position. And even if the element is shifted to a new location, but also continues to occupy the space from the original starting point.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位和布局</title>
</head>
<style>
    .big {
        width: 900px;
        height: 600px;
        background-color: black;
        position: relative;
    }
    
    .box1 {
        width: 150px;
        height: 100px;
        background-color: aqua;
        position: relative;
        left: 100px;
        top: 10px;
    }
    
    .box2 {
        width: 150px;
        height: 100px;
        background-color: red;
        /* position: relative; */
        left: 130px;
        bottom: 50px;
    }
    
    .box3 {
        width: 150px;
        height: 100px;
        background-color: yellow;
        /* position: relative; */
        left: 170px;
        bottom: 100px;
    }
    
    .box4 {
        width: 150px;
        height: 100px;
        background-color: blue;
        position: absolute;
        top: 150px;
        left: 200px;
    }
 
    
    .box6 {
        width: 150px;
        height: 100px;
        background-color: rgb(27, 173, 83);
    }
</style>

<body>

    <div class="big">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>

</html>

At this point our third box, yellow box, for example, then we will comment out its relative positioning, its operating result is this.

When we add to his relative positioning, position: relative; operating results is such that it its own original position as a reference to the right direction, but when it moves, it had the following green box does not move up, occupy its place, that is, using relative positioning will occupy the position, and fixed positioning is not to just the yellow box and green box, for example, if the yellow box to use absolute positioning to locate him, after removal of the yellow box, green box will move up the position previously occupied by the yellow box.

3, the fixed positioning

position：fixed；

Fixed positioning will always be positioned relative to the browser window, fixed positioning will be fixed at a certain location of the browser will not scroll with the scroll bars. The most common is when a computer which is not a small pop-up advertisements, not bad if you lost it, then slide the mouse to view the Web page, the small ads always will be there, as well as commonly used is the selection bar and the navigation bar at the bottom of the website or APP .