The specific use of the positioning position property (absolute,relative,static,fixed) in CSS

The positioned element is detached from the document Stream as long as the property value of the position is set to a value other than the default

1, Static is the default value of position , according to the normal flow of the document layout, set the property is worth the topof the element,left property does not work.

2. The fixed property value is positioned relative to the browser window (and viewport coordinates), the element after the property is set is independent, he is out of the document flow, and the position of the element in the browser window does not change when you drag the scroll axis. When

3. All parent elements are not setPosition (exceptStaticoutside the property value)When a child elementposition:Absolutewhen, itsTopand the Leftis relative to the document coordinates, but if a parent element is setpositionproperty and its value is notStatic, youTop, Leftare relative to the parent container. At the same time, when the element is set to absolute positioning will not occupy the original space out of the document flow, the layout of ordinary document flow elements like absolutely positioned elements do not exist. Thus, absolute positioning is used to combineZ-indexIt's good to cascade the display style.

4 when there is a level of setting in the parent element in order to relative position : absolute top and left relative top , left

5, absolute positioning is relative to the positioning of the object, to adjust the position of the picture with the left and top Properties, to center the display is text-align : Center horizontally,line-height vertically centered by row height . An absolutely positioned element is not useful if you do not set a property value such as top. Relatively positioned elements are still displayed in the original position if they do not set the value of the top property.

The specific use of the positioning position property (absolute,relative,static,fixed) in CSS