Relative positioning and absolute positioning of DIV CSS positioning_html/css_WEB-ITnose

In the process of CSS control typesetting, the layout is often messed up accidentally. In fact, you only need to understand the meaning of each method

Syntax
position: static | absolute | fixed | relative

They are static, absolute, fixed, relative

The more commonly used ones are absolute and relative

Absolute positioning (absolute): Drag the object assigned this positioning method out of the document flow, and use left, right, top, bottom and other attributes to perform absolute positioning relative to its closest parent object with the most positioning settings. , if the parent of the object does not set the positioning attribute, that is, it still follows the HTML positioning rules, it will be positioned based on the upper left corner of the body object as a reference. Absolutely positioned objects can be stacked, and the stacking order can be controlled through the z-index attribute. The z-index value is a unitless integer, with the larger one on top, and can have negative values ​​(currently negative values ​​are not supported by FF).

Relative positioning (relative): Objects cannot be stacked and are offset in the normal document flow based on left, right, top, bottom and other attributes. You can also use z-index hierarchical design.

After absolute is separated from the original parent object, its position will be filled by other objects, but relative will not