Positoin, absolute, and relative in CSS positioning

Positoin attributes have four values: static, fixed, absolute, and relative. The next two values are often used in layout positioning. As the name suggests, absolute refers to absolute positioning, drag an object out of the Document Stream and use the left, right, top, bottom, and other attributes for absolute positioning. the stack is defined by the Z-index attribute. At this time, the object does not have margins, but still has padding and border. Ralative refers to relative positioning, which is offset position in normal Document Stream Based on left, right, top, bottom and other attributes.
But how can we use absolute and relative methods? I have never studied it carefully before, and sometimes it will be a bit confused when it comes to specific applications. I believe many friends will also have such problems. Today, I tested it and came to the following conclusions:

1. When the positoin attribute value is relative
The original position occupied by the object is retained, and the object following it remains the original position based on the original document stream
The top value indicates the distance from the object to the original position offset.
The bottom value indicates the distance from the object to the original position.
When both exist, only top works.

The left value indicates the distance between the object and its original position to the right.
The value of right indicates the distance from the object to the left offset from the original position.
When both exist, only left takes effect.

2. When the positoin attribute value is absolute
The object is extracted from the document stream, and the original position is replaced by the following object.
The top value indicates the distance between the upper border of the object and the top of the browser window.
The bottom value indicates the distance between the bottom border of the object and the bottom of the browser window.
When both exist, only top works. If neither is specified, the top is the same as the original document stream position, that is, the vertical position remains unchanged.

The left value indicates the distance between the left border of the object and the left border of the browser window.
The right value indicates the distance between the Right Border of the object and the right side of the browser window.
When both of them exist, only left takes effect. If neither of them is specified, the left side is the same as the original document stream position, that is, the horizontal position remains unchanged.

When the value of the positoin attribute is absolute, if the value of the positoin attribute is relative for a level-1 parent object (whether a parent object or a grandfather object or a higher generation, the above-mentioned relative browser window positioning will become relative parent object positioning, which is helpful for precise positioning.
For more information about CSS, see the manual: http://www.jb51.net/shouce/css/index.html
I have drawn a conclusion after a long time, hoping to help you. If you have any mistakes, please correct them.