Css element positioning Style

Once I wrote a Web page, it was not difficult to learn css as a whole, but it was just element positioning, and I had always had a thorough understanding. Today, based on the concept of practice, after careful testing, I have concluded the following conclusions.

Css positioning: position
Static: static positioning by default. elements cannot be moved in normal document streams.
Absolute: an independent element that is separated from the document stream. It moves and locates relative to the parent layer (excluding the parent layer for static positioning.
Relative: relative positioning, moving positioning relative to its own location, the effect is equivalent to moving Positioning relative to the parent layer.
Fixed: fixed positioning, move Positioning Relative to window positioning.

Note:
1. Moving positioning refers to moving the element position through the top, bottom, left, right attributes.

2. Any element has the characteristics of Positioning Relative to the parent layer. Therefore, when you do not need to move the positioning attribute in the direction, but only use margin to locate the element, it must be a relative shift.

3. absolute Means "independent, absolute". I think it should be a "independent" meaning for better understanding. The effect it achieves is that elements are separated from the document stream, which confirms the meaning of independent existence.

 

The test results are as follows (static elements are not tested ):

Child element (relative to =>) parent Element
Absolute => static absolute
Fixed => static absolute
Relative => static relative

Absolute => relative to absolute
Fixed => absolute
Relative => relative to absolute

Absolute => relative to relative
Fixed => relative absolute
Relative => relative

Absolute => fixed relative
Fixed => fixed absolute
Relative => fixed relative

<Div class = "size300_300" style = "position: static; margin-left: 100px;">
<Div class = "size100_100" style = "position: absolute; top: 10px;"> son </div>
</Div>