Just getting started with the front end of the white who might HTML content on positioning (position) of some confusion, resulting in better use can not locate. You know, make good use of positioning can solve many petty issues and understand the document flow. Next will be four kinds of simple analytical positioning and differentiation.
Static positioning
Static positioning (position: static) is the default positioning in HTML, in line with conventional document flow, there is not much content.
Relative positioning
Relative positioning (position: relative), the position of the object with respect to itself, the vertical offset for left and right, it is noted that it is not departing from the document flow!
As shown above, the relative positioning of the red div setting, position offset left (top: 20px; left: 20px ;), but according to a conventional blue div still holding the original document flow position, although described red div position offset but with respect to its own original position still occupied.
Absolute positioning
Absolute positioning (position: absolute), the position shifted relative to the parent, if the parent has no parent or no location, then continue up to find a reference level, and ultimately browser window. Please note that there is a little different from the relative positioning, absolute positioning from the regular document flow! 
As shown above, the red div set absolute positioning, the left shift position (top: 20px; left: 20px ;), is worth noting that the blue div going up! Because the absolute positioning offset from the original position disappears, so will the next sibling div regular document flow to replace its original position.
Fixed positioning
Fixed positioning (position: fixed), understood as absolute positioning in a special case, i.e., absolute comprises fixed. It is special in that it is not like absolute madness "to find my father," it naturally referring to the browser window! After setting the fixed positioning an object, i.e. the object is in the screen of the browser window in a fixed position, ignoring the length of the document, and a roller bar to scroll the window size. This is common in open and sometimes there will always be some pages advertising on the side, too annoying!
Solve practical problems regarding positioning and other dry cargo to be updated -
