1.css3 positioning distinction
(1) the relative positioning (position: relative)
① If no offset positioning of the element itself is of no effect
② elements without departing from the document flow
③ not affect the layout of other elements
Note: left, top , right, bottom offset relative to the current element itself
(2) Absolute positioning (position: Absolute)
① that the element completely out of the document flow
② that the inline element support width and height (so inline includes a block characteristic)
③ that the block elements default width content determination (so that the block includes inline based characteristics)
If a positioning element positioned relative to the ancestor ancestor shifted, is not positioned with respect to the entire document ancestor shifted (absolute, relative, fixed).
NOTE: If there are a plurality of elements includes a positioning mode, then the offset is to find the nearest ancestor element, positioning the offset can not be used alone, must be positioned with the ancestor elements.
(3) fixed positioning (position: Fixed)
① that the element completely out of the document flow
② that the inline element support width and height (so inline includes a block characteristic)
③ that the block elements default width content determination (so that the block includes inline based characteristics)
were offset impact, not the browser scroll bar with respect to the entire browser window, will not be affected ancestor elements.
(4) Location viscous (position: sticky)
without the specified position, the effect is not located, reached the designated position, it becomes a fixed pattern.
Small knowledge: z-index: 0 by default, is greater in the above, it can be negative, more time will begin with the same level of the first comparison, when the comparison, must be positioning mode.
