Some research on Positoin, absolute, and Relative in CSS positioning_Experience exchange

The Positoin attribute has four values: static, fixed, absolute and relative. The latter two are often used in positioning in layout. As the name suggests, absolute refers to absolute positioning, that is, dragging the object out of the document flow, using left, Right, top, bottom and other attributes perform absolute positioning, and their cascading is defined through the z-index attribute. The object now has no margins, but still has padding and borders. Ralative refers to relative positioning, which is to offset the position in the normal document flow based on left, right, top, bottom and other attributes.
But what is the absolute law and what is the relative law? I have never studied it carefully before, and sometimes I am a little confused when it comes to specific applications. I believe many friends will also have this problem. Today I specially tested it and came to the following conclusions:

1. When the Positoin attribute value is Relative
The original position occupied by the object is retained, and the objects behind it are retained. The original document flow still maintains its original position
The value of Top represents the downward offset distance of the object relative to the original position
The value of bottom represents the upward offset distance of the object relative to the original position
When both exist at the same time, Only Top works.

The value of left represents the distance to the right of the object relative to the original position
The value of right represents the distance to the left of the object relative to the original position
When both exist at the same time, only left takes effect. .

2. When the Positoin attribute value is absolute
The object is extracted from the document stream, and the original position occupied is replaced by the subsequent object
The value of Top indicates The distance between the upper border of the object and the top of the browser window
The value of bottom represents the distance between the lower border of the object and the bottom of the browser window
When both exist at the same time, only Top takes effect; if both are not specified, the other The top position will be consistent with the original document flow position, that is, the vertical position will remain unchanged.

The value of left represents the distance between the left border of the object and the left side of the browser window
The value of right represents the distance between the right border of the object and the right side of the browser window
When both exist at the same time, only left takes effect. ; If neither is specified, its left side will be consistent with the original document flow position, that is, the horizontal position will remain unchanged.

When the Positoin attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandparent object, or any higher level, all are treated equally, ^_^), the Positoin attribute value is Relative, then The above relative browser window positioning will become relative parent object positioning, which is very helpful for precise positioning.
For more information about CSS, please refer to the manual: /shouce/css/index.html
The conclusion reached after a long time of hard work ,hope its good for U.S. If there are any oversights, please correct me.