Setting this property to absolute will drag an object out of the normal document flow absolute position regardless of the layout of the content around it. If other objects with different Z-index attributes already occupy a given position, they do not affect each other, but overlap in the same position. The object does not have a margin, but it still has a padding and border. To enable 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 attributes will use their default value auto, which will cause the object to follow normal HTML layout rules and be rendered immediately after the previous object. The TRBL attribute (TOP, RIGHT, BOTTOM, LEFT) is valid only when position is set. When setting position:absolute If the parent (infinite) does not set position, then absolute is positioned at the top left corner of the browser in combination with the TRBL property. The current absolute, combined with the TRBL attribute, is positioned at the upper left corner of the parent (nearest) as the original point. When position: Relative is set to the upper left corner of the parent content area as the original point combined with the TRBL attribute (or offset relative to the last element in the parent content area of the positioned element), and the upper left corner of the BODY is used as the original point if there is no parent. Relative positioning is not superimposed. When relative positioning is used, elements still occupy their original space, whether or not they are moved. Therefore, moving an element causes it to overwrite other boxes. In general, using Absolute when a web page is centered is a mistake because the web page automatically ADAPTS to the resolution. Absolute uses the upper left corner of the browser as its starting point and does not change position for resolution. Sometimes you need to rely on z-index to set the relationship between the top and bottom of the container. The higher the value is, the higher the value is. The range of values is natural. Of course, it is important to note that the z-index cannot be used to set the parent-child relationship. The child must be above and the parent must be below. Setting this property to relative keeps the object in normal HTML flow, but its position can be offset based on its previous object. The text or objects positioned after the object are relative occupy their own space and do not overwrite the natural space of the object being positioned. In contrast, text or an object after an absolute location occupies the natural space of the location object until it is dragged out of the normal document flow. Placing an absolute position object outside of the viewable area causes the scroll bar to appear. Placing relative positioning objects outside of the viewable area, the scroll bar does not appear. The main problem with positioning is to remember the meaning of each positioning. Relative positioning is “relative” to an element’s initial position in the document flow, while absolute positioning is “relative” to the most recently located ancestor element. ———————————————— Copyright notice: This article is originally published BY CSDN blogger “JSship” under the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement. The original link: blog.csdn.net/jsship/arti…