Definition 1.

Relative positioning: it is positioned relative to the position of the document flow in which it is located. It will be separated from the document flow, and its position before positioning will not be retained in the document.

Absolute positioning: Absolute positioning is performed on a container that has been positioned relative to its ancestor. If not set in the ancestor node, it is positioned relative to the body by default. Does not leave the document flow, the position before positioning remains.

2. Explain

Let’s introduce three commonly used attributes relation, absolute and fixed to distinguish relative positioning from absolute positioning.

 <style>
        html{
            background: # 000;
        }
        .wrap{
            width: 600px;
            height: 600px;
            background: #aaa;
        }
        .test{
            width: 50px;
            height: 50px;
            background: green;
        }
        .item{
            width: 200px;
            height: 200px;
            background: red;
            }
   </style>
   
   <body>
    <div class="wrap">
        <div class="item"> 123 </div>
        <div class="test"></div>
    </div>
</body>
Copy the code

I wrote a simple HTML style that looks like this: the entire page has a black background, a box wrap with a gray background, a large box Item with a red background and a small box Test with a green background

Now we will introduce each positioning function :(we only operate on the red box item)

1. relation

<style>{
        .item{
            width: 200px;
            height: 200px;
            background: red;
            /* Add the relative positioning attribute */
            position: relative;
            left: 100px;
            }
  </style>          
Copy the code

Add the relation attribute to the test box, and when the distance to the left of the document flow is 100px, the page will look like this: At this time, the green box does not go up, indicating that the red box does not separate from the document flow and still occupies a certain space.

2.absolute

<style>{
        .item{
            width: 200px;
            height: 200px;
            background: red;
            /* Add the absolute location attribute */
            position: absolute; 
            left: 100px;
            }
  </style> 
Copy the code

Now if we change the property to Absolute, you will notice that the green box will go up, indicating that this property will remove the red box from the document flow and does not occupy a certain amount of space.

3.fixed

<style>{
        .item{
            width: 200px;
            height: 200px;
            background: red;
           /* Add fixed positioning attributes */
            position: fixed; 
            right:0;
            }
  </style>
Copy the code

At this point, it is obvious that the red box has moved out of the gray box, and the green box has also moved up, indicating that it is out of the document flow.

Since the parent container does not add any attribute of position, the relative positioning is relative to the body. You may have this question. If you add the same attribute to the green box as to the red box, the result will be the same. The fixed attribute is positioned relative to the window, so that the parent container wrap can be positioned relative to its child containers item and test. Let’s see the essential difference between absolute and fixed.

<style>
        .wrap{
            width: 600px;
            height: 600px;
            background: #aaa;
            
            position: relative;
        }
        .test{
            width: 50px;
            height: 50px;
            background: green;
            
            position: absolute; 
            right: 0; 
        }
        .item{
            width: 200px;
            height: 200px;
            background: red;
            
            position: fixed;
            right: 0;
            }
   </style>
Copy the code

This comparison is persuasive because both item and test have a wrap parent. Test with absolute is positioned relative to wrap, while item with fixed is positioned relative to Window, regardless of whether its parent container has relative attributes.

3. Summary

The differences between relation filed absolute in position:

  1. relation Relative positioningIs positioned relative to its own document flow and does not depart from the document flow
  2. absolute Absolute positioning, positioned against nearest parent containers with relative, obsolute, fixed, and sticky will be obsolete from the document flow
  3. Fixed absolute position (usually called:Fixed position), relative to the window location, will be out of the document flow