I struggled all night about the Position attribute in CSS_html/css_WEB-ITnose

The usage of static and relative is relatively clear and will not be discussed here. It is worth noting static positioning, that is, elements that are not positioned by default ignore top, bottom, left, right or z-index. declaration; although the relatively positioned element does not break away from the document flow and also ignores the top, bottom, left, and right declarations, the z-index attribute can work.

Yesterday I was mainly struggling with absolute and fixed. The teacher demonstrated in class how to use these two positioning methods to set the right and bottom of the element to 0, and add a lot of line breaks under the element. When opening the window, both methods are It is located in the lower right corner. The difference is that when the scroll bar scrolls, the fixed positioned element will still be in the lower right corner, while the absolutely positioned element will stay at the initial display position, as shown in the figure:

It just passed without much thought. When I was doing exercises at night, I found the absolute positioning method in the picture above. Although the scroll bar will not follow when it moves, you can directly use the mouse to move on the edge of the window. When dragging the window size, it will follow it and stay in the lower right corner. This makes me very confused.

Later, when I checked the information on the Internet, I found that many places on the Internet, including Baidu Library, and Baidu Experience, had very basic errors. In many places, absolute and fixed were positioned relative to the body. However, after testing, as shown in the figure: (The red line is the body border, the blue line is the html border)

It can be clearly seen that the border of the div block is close to the html tag border instead of body. So is absolute positioning based on the html tag? Obviously not, there are many line breaks below the div, which are not close to the html tag.

It can be explained that absolute positioning and fixed positioning are both based on the browser window. The difference I understand is that absolute positioning generates an absolute positioning coordinate based on the initial state of the window, while fixed positioning It is always locked on the browser window and always meets the set positioning no matter how the window changes. However, this understanding still cannot explain why under absolute positioning, when dragging the edge of the window to zoom in or out, the div block will change instead of staying in place.

Finally, after asking the teacher, I got a reply saying that dragging the page size will cause the page to be redrawn. In other words, dragging the page size is equivalent to constantly reopening the window. Finally, it is reasonable. This explains the above phenomenon, and also explains why there is some lag when dragging the page size, but it is much smoother when the scroll bar scrolls.

Please forgive me if this is my first time blogging and it’s a bit messy. I mainly want to record the entire thinking process and understanding. If there is any misunderstanding or if you have a simpler and clearer way, I hope you can explain this problem in the comments, thank you!