First, summarize the two usage of position (absolute and relative)

Absolute is often used when Javascript is used for some animation effects, because it is out of the Document Stream.
Go to the manual for official explanations. Here I will write down my test results.

1. Position: absolute; relative to the absolute size of the browser, it is absolutely positioned in the CSS manual, and it is out of the Document Stream. What is absolute size? The absolute size is the size of the entire webpage. The absolute size is naturally the relative size. The relative size is the browser's viewport, which is what we can see without scrolling, because some webpages have a large amount of content, its height may be large, so a scroll bar will appear. The relative size does not include the content below the scroll, which is just what we can see!

2. Position: relative; relative positioning, not separated from the document stream! Compared with the previous object of its document stream (what I think ...... You can also understand the context. The edge location of the previous object varies depending on the display attribute.
First, there is a special case:

Display by yourself: inline: if the previous object is inline, it will be offset to the upper border of the previous object, and the left offset to the right border, that is, two objects are in the same row, 1.

 

 1 <style type = "text/CSS">
2 # demo3 {width: 200px; Height: 200px; Background: #666; position: relative; left: 200px;/* Top: 50px ;*/}
3 </style>
4 <span style = "border: 2px solid # f00" style = "width: 300px; "> reference 1 </span> <span id =" demo3 "> relative </span>

 

 

 

　　　　　　　　
Figure 1
In other cases, another row is offset relative to the left side of the parent container, and the bottom of the previous object is offset, so relative is finished.
Then let's talk about the situation of absolute. We all know that it is absolute positioning. As we mentioned earlier, the absolute size of the browser is actually offset by the absolute size of the browser. 2!
　　　　　　　
Figure 2

The above discussion is too one-sided. Please refer to the official explanation here.

.