Some research on positoin, absolute and relative in CSS positioning _ experience Exchange

The Positoin property has four values: static, fixed, absolute, and relative, the following two in the layout of the positioning is often used, as the name suggests, Absolute is absolute positioning, the object from the document flow dragged out, using Left,right, Attributes such as Top,bottom are absolutely positioned, and their cascade is defined by the Z-index property. The object does not have a margin at this time, but it still has padding and borders. Ralative refers to the relative positioning, that is, according to Left,right,top,bottom and other attributes in the normal document flow offset position.
But, how is the absolute method, how to a relative method? I have not been careful to study it, to specific applications sometimes a bit confused, I believe many friends will have such a problem. Today I tested it deliberately and came to the following conclusions:

1, when the Positoin property value is relative
Object retains its original position, and the object following it remains the same as the original document stream
The top value indicates the distance the object is offset from the original position
Bottom value indicates the distance the object is offset from the original position
When both exist, only top works.

The left value indicates the distance the object is offset from the original position to the right
The value of right indicates the distance to the left of the object relative to its original position
When both exist, only left works.

2, when the Positoin property value is absolute
object is extracted from the document stream, and the original position is replaced by the object behind it.
The top value indicates the distance between the upper border of the object and the bottom of the browser window
The bottom value represents the distance between the bottom border of the object and that of the browser window
When both are present, only top works, and if neither is specified, it is aligned with the original document flow position, the vertical position remains unchanged.

The left value indicates the distance between the border of the object and the left side of the browser window
The value of right indicates the distance from the right-hand border of the object to the right of the browser window
When both are present, only left works, and if neither is specified, the left-hand side will be the same as the original document flow position, that is, the horizontal position remains unchanged.

When the Positoin property value is absolute, if there is a level of parent object (whether it is a parent object or a grandparent object, or a higher seniority, equal, ^_^) Positoin property value is relative, The above relative browser window positioning will become relative to the parent object positioning, which is helpful for precise positioning.
For more information on CSS please refer to the manual: http://www.jb51.net/shouce/css/index.html
Hard for half a day to come to the conclusion, hope for everyone useful. If there is negligence, please correct me.