Detailed explanation of css position: absolute, relative_Experience exchange

Explanation on CSS2.0 HandBook:

Setting this property value to absolute will drag the object out of the normal document flow and position it absolutely regardless of the layout of its surrounding content. If other objects with different z-index properties already occupy a given position, they will not affect each other and will overlap at the same position. At this time, the object does not have an outer patch (margin), but it still has an inner patch (padding) and a border (border).
To activate the absolute positioning of an object, you must specify at least one of the left, right, top, and bottom properties, and set the value of this property to absolute. Otherwise the above properties will use their default value of auto , which will cause the object to obey normal HTML layout rules and be rendered immediately after the previous object.

TRBL attributes (TOP, RIGHT, BOTTOM, LEFT) are only valid when the position attribute is set.
When position:absolute is set
If the parent (infinite) does not set the position attribute, then the current absolute is combined with the TRBL attribute to position the upper left corner of the browser as the original point
If the parent (infinite) ) to set the position attribute, then the current absolute is positioned using the upper left corner of the parent (nearest) as the original point in combination with the TRBL attribute.

When position: relative
is set, the upper left corner of the parent (nearest) content area is referenced as the original point and combined with the TRBL attribute for positioning (or relative to the positioned element in the parent content area The previous element is offset), if there is no parent, the upper left corner of BODY is used as the original point. Relative positioning cannot be stacked. When using relative positioning, no matter whether the element is moved or not, the element still occupies the original space. Therefore, moving an element causes it to cover other boxes.

Generally speaking, it is easy to make mistakes when using Absolute if the web page is centered, because the web page always automatically adapts to the size of the resolution, while Absolute will use the upper left corner of the browser as the original point and will not adapt. Change position for changes in resolution. Sometimes it is necessary to rely on z-index to set the upper and lower relationship of the container. The larger the value, the higher it is at the top. The value range is a natural number. Of course, one thing to note is that the parent-child relationship cannot be set up and down using z-index. The child must be on top and the parent must be on the bottom.

Setting this property value to relative will keep the object in the normal HTML flow, but its position can be offset based on its previous object. Text or objects following a relatively positioned object occupy their own space without overwriting the natural space of the positioned object. In contrast, text or objects following an absolutely positioned object occupy its natural space until the positioned object is dragged out of the normal document flow. Placing absolutely positioned objects outside the visible area will cause scroll bars to appear. However, if a relatively positioned object is placed outside the visible area, the scroll bar will not appear. In fact, the main problem with positioning is to remember the meaning of each positioning. Relative positioning is "relative to" the element's initial position in the document flow, while absolute positioning is "relative to" the nearest already positioned ancestor element.

The following is a supplement:

Although I know the absolute positioning (absolute) and relative positioning (relative) of CSS, I have never written the relevant ones myself. Effect!
After working for a long time, it is finally finished! I also understood these two attributes a little better!

The summary is as follows:

First look at the following layer structure