Detailed explanation of css position: absolute and relative
When I was looking at CSS today, I encountered the problem of position: absolute and relative. I have been confused, but I finally figured it out today.
Explanation on CSS2.0 HandBook:
Setting this property to absolute will drag the object out of the normal document flow with absolute positioning regardless of the layout of the content around it. If other objects with different z-index properties already occupy the given position, they will not affect each other, but will be stacked at the same position. At this point the object has no outer padding ( margin ), but still has inner padding ( padding ) and border ( border ).
To activate absolute positioning of an object, you must specify at least one of the left, right, top, and bottom properties, and set this property to absolute. Otherwise the above properties will use their default value auto, which will cause the object to obey normal HTML layout rules and be rendered immediately after the previous object.
TRBL properties (TOP, RIGHT, BOTTOM, LEFT) are only valid when the position property is set.
When setting position:absolute,
if the parent (infinite) does not set the position attribute, then the current absolute is positioned with the upper left corner of the browser as the original point in combination with the TRBL attribute.
If Absolute is positioned with the upper left corner of the parent (closest) as the original point in combination with the TRBL property.
When setting position: relative
, it refers to the upper left corner of the parent (nearest) content area as the original point for positioning combined with the TRBL attribute (or offset relative to the previous element of the positioned element in the parent content area), If there is no parent, the upper left corner of the BODY is the original point. Relative positioning cannot be cascaded. When using relative positioning, the element still occupies the original space regardless of whether the element is moved or not. Therefore, moving the element causes it to cover other boxes.
Generally speaking, using Absolute is easy to make mistakes if the web page is centered, because the web page has always been automatically adapted to the size of the resolution, while Absolute will take the upper left corner of the browser as the original point, and it will not be changed due to the change of resolution. Change location. Sometimes it is necessary to rely on z-index to set the upper and lower relationship of the container. The larger the value, the more at the top. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set up and down with z-index. The child must be on the top and the parent on the bottom.
Setting this property to relative keeps the object in the normal HTML flow, but its position can be offset relative to 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 will occupy its natural space before the positioned object is dragged away from the normal document flow. Placing an absolutely positioned object outside the visible area will cause scroll bars to appear. When placing a relative positioned object outside the visible area, the scroll bar does 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 positioned ancestor element.
The following is a supplement:
Although I know the absolute positioning (absolute) and relative positioning (relative) of CSS, but I have never written the related effects myself!
After a busy day and a half, it's done! Also figured out these two properties!