Positioned: positioning normal stream, float position, relative positioning, absolute positioning, fixed positioning
Feature
Common Location: positioning a document called flow, is targeting the default page elements (block level: from top to bottom, a separate line; row stage: left to right, is not a separate line)
Float position:
1. The document flow from the float, the float does not make the front position
2. The floating element will be docked on the left or right of the parent element, is also followed by other elements or edge
3. floats only within the current row
4. Floating element only in the parent
The plurality of block-level elements in a row
Floating-induced effect
When the width of the parent element not fit all floating elements, the last element of a new line, together floating elements, the greatest impact on inline elements
Text, inline elements, row elements within the block, by way of text wrapping arrangement, will not be under pressure in the float, the float will be avoided skillfully
Clear float (only three values)
clear：left；right，both
Impact of the floating element to the parent element
Cause: hight if the parent element is not set or is not set adaptation, when the elements of all the floating portion up to the parent hight 0
Solution
1> px provided directly to the parent high
Drawbacks: the need for high accurate px
2> Set floating parent
Drawbacks: the subsequent impact on the elements
3> set on a parent overflow: hidden
Drawbacks: If there is a subset of the content overflow display, will be hidden together
4> parent element empty element additionally provided clear clear float
position positioning
1, static default positioning
2, relative relative positioning: the original position to retain the original position of the top left offset
Use: fine-tuning element position
3, absolute absolute positioning: from document stream, the position shift with respect to the body
Note: Once we set absolute positioning, the element will have a floating effect
4, fixed fixedly positioned: from the normal flow, the influence from the scroll bar, body upper left-hand shift position
5, relative and absolute combination of: adding the relative positioning within the parent element offset is added in the absolute positioning element
Using the occasion
A plurality of block-level element displayed in one line, float
Elements to achieve fine tuning its own position, relative positioning
When implementing the pop-up content and layout, combined with absolute positioning and relative positioning
Fixed top left navigation fixed advertising, fixed positioning