CSS position: absolute and relative

Today, I encountered the position: absolute and relative problems when I was reading CSS. I have been confused and I finally figured it out today.

 

Explanation on css2.0 Handbook:
Setting this attribute value to absolute will drag the object out of the normal document stream for absolute positioning, regardless of the layout of the surrounding content. If other objects with different Z-index attributes occupy a given position, they will not affect each other, but will stack at the same position.

trbl attributes (top, right, bottom, left)
When position: absolute is set
If the parent level (unlimited) does not set the position attribute, the current absolute uses the trbl attribute to locate the original point in the upper left corner of the browser.
If the parent level (unlimited) sets the position attribute, then, the current absolute is located in the upper left corner of the parent (closest) with the trbl attribute as the original vertex.
When position: relative is set
, reference is made to the parent level (most recent) the upper left corner of the content area is the original point and is located based on the trbl attribute (or offset relative to the previous element in the parent content area of the located element ), if there is no parent level, the original vertex is in the upper left corner of the body. Relative positioning cannot be stacked. When relative positioning is used, elements still occupy the original space regardless of whether the elements are moved or not. Therefore, moving an element overwrites other boxes.
generally, absolute is prone to errors when the webpage is centered, because the webpage automatically adapts to the resolution, while absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Sometimes you also need to use Z-index to set the upper and lower relations of the container. The larger the value is, the higher the upper it is. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with Z-index. The parent-child relationship must be set at the parent level.
setting this property value to relative will keep the object in a normal HTML stream, but its position can be offset based on the previous object. The text or objects after the relative (relative) positioning objects occupy their own space and do not overwrite the natural space of the objects to be located. In contrast, the text or object after an absolute (absolute) Positioning object occupies its natural space before it is dragged away from the normal document stream. Placing an absolute (absolute) Positioning object outside the visible area will cause the scroll bar to appear. The scroll bar does not appear when the relative (relative) Positioning object is placed outside the visible area. In fact, the main problem of positioning is to remember the significance of each positioning. Relative positioning is "relative to" the initial position of the element in the document stream, and absolute positioning is "relative to" the most recently located ancestor element