Positioning in CSS

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.