General positioning
Positiont:static
The default value for the position of elements in a normal document flow is static, and no proactive declaration is required. Top, right, bottom, left, and Z-index are ignored.
Relative positioning
Position:relative
. relative{position:relative; left:20px; top:20px;}
Elements that have the Relateive class will move 20px to the right relative to the original position and move 20px down. And no matter how it moves, the element will still occupy its original position .
Absolute positioning
Position:absolute
An absolutely positioned element is independent of the document flow and therefore does not occupy any space.
Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. Without such a parent element, its position is relative to the initial containing block.
fixed positioning
Position:fixed
Creates fixed-positioned elements that are positioned relative to the browser window.
Open source China in the lower right corner of the green "top" function, this is the positioning.
This is what the code looks like with Chrome's development tools.
<div id= "Topcontrol" title= "back to the top" style= "position:fixed; bottom:165px; right:100px; Cursor:pointer; Display:block; " > </div>
Floating
Float:left | Right
The floating element is not in the normal document flow, so the block box in the document flow behaves as if the floating element does not exist.