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

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

1, when the Positoin property value is relative
The position that the object originally occupies is retained, and the object behind it remains in its original position as the original document flow
The value of top indicates how far the object is offset from its original position
The value of bottom indicates the distance the object is offset upward from the original position
When both exist, only top works.

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

2, when the Positoin property value is absolute
Objects are extracted from the document stream, and the original positions are replaced by the objects behind them.
The value of top indicates the distance from the top of the browser window to the upper border of the object
The value of bottom indicates the distance between the bottom border of the object and the base of the browser window
When both are present, only top works, and if neither is specified, the top of the file will be the same as the original document flow position, i.e. the position of the vertical remains unchanged.

The left value indicates the distance from the left border of the object to the browser window.
The value of right indicates the distance from the right border of the object to the left side of the browser window
When both are present, only left is active, and if neither is specified, then it is the same as the original document flow position, that is, the horizontal position remains the same.

At the same time as the Positoin property value is absolute, if there is a first-level parent object (either a parent object or a grandparent object, or a higher generational, all-in-one, ^_^), the Positoin property value is relative. Then the relative browser window positioning will become relative to the parent object positioning, which is useful for precise positioning.
For more information on CSS, please refer to the manual: http://www.jb51.net/shouce/css/index.html
Hard for a long day to come to the conclusion, hope to everyone useful. If there is negligence, please correct me.

