The position, relative, absolute distinction and connection

The element positioned as relative is detached from the normal text stream (the meaning of leaving the normal text stream is positioning, there is a reference object, which is positioned with top,bottom,left,right), but its position in the text stream still exists, The layer positioned as absolute is detached from the normal text stream, but the difference from the relative is that its position in the normal stream does not exist.

Detailed Css+div layout positioning
In the use of css+div layout positioning, has been the position of the four attribute value relative,absolute,static,fixed points is not very clear, so often appear to be very depressing results. Today, the study of a little bit, finally understand. Here is a summary:
Let's look at the definition of each property value in position:
1, Static: Default value. There is no positioning, the element appears in the normal stream ( ignoring top,bottom,left,right or z-index declarations ).
2, relative: to generate the relative positioning of the elements, through the top,bottom,left,right set relative to its normal position positioning. The hierarchy can be graded through Z-index.
3. Absolute: Generates an absolutely positioned element that is positioned relative to the first parent element other than static positioning . The position of the element is defined by the "left", "Top", "right" and "bottom" properties. The hierarchy can be graded through Z-index.

Where the test2 CSS position is static, and absolute is positioned relative to the first parent element other than static positioning, that is, position is relative test1.

4, fixed: Generate absolutely positioned elements, relative to the browser window to locate. The position of the element is defined by the "left", "Top", "right" and "bottom" properties . The hierarchy can be graded through Z-index.
Static and fixed positioning method better understanding, do not do analysis. The following is an analysis of more relative and absolute applications:

3, the main difference between relative and absolute:
First, the presence or absence of a position in the normal stream that has been mentioned above. Second, thelayer that relative locates is always relative to its nearest parent element , regardless of its parent element's positioning method.

In the diagram, the red background layer is relative positioned, and its direct parent element green background layer is the default static location. The position of the red background layer is the relative green background layer top and left 20 elements. And if the red background layer is positioned as absolute:

As you can see, the red background layer still defines top:20px;left:20px, but its relative elements change to a absolute or relative yellow background layer. Therefore, the layer that is positioned for absolute is always relative to its nearest parent, which is defined as absolute or relative, and the parent layer is not necessarily its direct parent layer. If absolute or relative are not defined in the parent layer, they are positioned relative to the body, as shown in the following figure

The definition of the margin attribute value is also consistent with the above rules, except for top, left, right, and bottom positioning.