Positioning and floating of CSS

#CSS定位, floating
# #1,
Standard document Flow: Refers to the fact that the rules of each element are arranged in a way that does not use positioning or other typography or CSS, which is the default arrangement of the CSS.
Negative margins: Offsets the flow of the document, but does not leave the document flow and does not occupy the original space.
# #2, relative positioning:
Position:relative
1, set the relative positioning will not affect the element itself
2. Not out of document flow
3, its original occupied space is still retained
4, if the relative positioning offset is not set, the element itself will not be affected.
div{
position:relative; set Div to relative displacement
left:100px;
top:100px;
Set DIV to move relative to body
# #3, absolute positioning:
Settings: Position:absolute
1, the element will be separated from the document flow, the document as the parent class, if the locating parent is found, will be to locate the parent as the parent class
2, set the absolute positioning, line-level elements also support the setting of high-width, that is, by default plus a Display:inline-block
3, set absolute positioning, this element is equivalent to float up, this time on its displacement, is relative to the body displacement.
It is also not controlled by its parent class.
4, after the floating will cover the above floating, such as first floated Div1, and then floated Div2, this time div2 will be on the top
5, the level of priority: Z-index: Number. The larger the number, the higher the priority display.
# # #4, fixed positioning:
Position:fixed.
Fixed positioning is also out of flow, not controlled by flow.
It can also be shifted, left, top, right, bottom
# # #5, floating
Float:right Left None (default, not floating)
Floating away from the document flow, and does not occupy the original position, the equivalent of floating up.
Move in one direction until you reach the boundary of the previous element or the boundary of the parent element stops.
When the row-level element is set to float, it will default to Dispaly:inline-block, which will turn this element into an inline block-level element by default.
This means that it will have a high-width attribute.
The preceding element is set to float, and the following elements do not want to float along. Workaround: Add an empty div1 in the middle of the two parts
Use this div1 to clear the float. Clear left and right floating: Clear:left clear:right all clear: Clear:both

Positioning and floating of CSS