CSS element Positioning style

Once wrote a Web page, learning CSS overall is not difficult, but is the element positioning, always smattering, until today, in practice out of the idea of genuine knowledge, after careful testing, summed up the following conclusions.

CSS positioning: Position
Static: The default static location, where elements cannot be moved in a normal document flow.
Absolute: A standalone element in which an element is detached from the document stream and positioned relative to the parent layer (except for the parent layer of the static location).
Relative: relative positioning, relative to the position of the location of the positioning, the effect is equivalent to the parent layer moving positioning.
Fixed: Stationary positioning, relative to the window mobile positioning.

Note:
1. Mobile positioning refers to moving the element position through the Top,bottom,left,right property.

2, any element has relative to the parent layer positioning characteristics, so when the positioning property without the direction of movement, and only with the margin positioning, it is necessarily relative displacement.

3, Absolute is "independent, absolute" meaning, I think should be taken "independent" meaning better understanding. The effect it achieves is that the element is detached from the document flow, confirming the meaning of independent existence.

The test results are as follows (the static element is not tested):

Child Element (relative to = =) parent element
Absolute = static absolute
fixed = static absolute
relative = static relative

Absolu Te = absolute relative
fixed = absolute absolute
relative = absolute relative

Absolute = relative relative
Fixed = = Relative absolute
relative = relative relative

absolute = fixed relative
fixed = fixed absolute
relative = f ixed relative

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