css position: relative，absolute详解_html/css_WEB-ITnose

Regarding position in CSS, position is very important in layout. I checked a lot of information but it is difficult to understand. Here is my personal understanding:

Syntax:

position: relative | absolute

relative: The object follows the regular flow and is passed with reference to its position in the regular flow The top, right, bottom, and left properties do not affect any elements in the regular flow when they are offset. Absolute: The object breaks away from the regular flow and uses top, right, bottom, left and other attributes for absolute positioning. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin.

Explanation:

When position: relative is set, it is positioned relative to itself. (That is equivalent to moving the current position)

When position: absolute is set, it is positioned relative to the parent, and no parent is positioned relative to the body.

Note: When position: absolute, specify at least one of left, right, top, and bottom. Objects can be stacked, and the stacking is defined by the z-index attribute.

Objects cannot be stacked when position: relative