Detailed explanation of css position: absolute, relative_Experience exchange

Explanation on CSS2.0 HandBook:

Setting this property value to absolute will drag the object out of the normal document flow and position it absolutely regardless of the layout of its surrounding content. If other objects with different z-index properties already occupy a given position, they will not affect each other and will overlap at the same position. At this time, the object does not have an outer patch (margin), but it still has an inner patch (padding) and a border (border).
To activate the absolute positioning of an object, you must specify at least one of the left, right, top, and bottom properties, and set the value of this property to absolute. Otherwise the above properties will use their default value of auto , which will cause the object to obey normal HTML layout rules and be rendered immediately after the previous object.

TRBL attributes (TOP, RIGHT, BOTTOM, LEFT) are only valid when the position attribute is set.
When position:absolute is set
If the parent (infinite) does not set the position attribute, then the current absolute is combined with the TRBL attribute to position the upper left corner of the browser as the original point
If the parent (infinite) ) to set the position attribute, then the current absolute is positioned using the upper left corner of the parent (nearest) as the original point in combination with the TRBL attribute.

When position: relative
is set, the upper left corner of the parent (nearest) content area is referenced as the original point and combined with the TRBL attribute for positioning (or relative to the positioned element in the parent content area The previous element is offset), if there is no parent, the upper left corner of BODY is used as the original point. Relative positioning cannot be stacked. When using relative positioning, no matter whether the element is moved or not, the element still occupies the original space. Therefore, moving an element causes it to cover other boxes.

Generally speaking, it is easy to make mistakes when using Absolute if the web page is centered, because the web page always automatically adapts to the size of the resolution, while Absolute will use the upper left corner of the browser as the original point and will not adapt. Change position for changes in resolution. Sometimes it is necessary to rely on z-index to set the upper and lower relationship of the container. The larger the value, the higher it is at the top. The value range is a natural number. Of course, one thing to note is that the parent-child relationship cannot be set up and down using z-index. The child must be on top and the parent must be on the bottom.

Setting this property value to relative will keep the object in the normal HTML flow, but its position can be offset based on 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 occupy its natural space until the positioned object is dragged out of the normal document flow. Placing absolutely positioned objects outside the visible area will cause scroll bars to appear. However, if a relatively positioned object is placed outside the visible area, the scroll bar will 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 already positioned ancestor element.

The following is a supplement:

Although I know the absolute positioning (absolute) and relative positioning (relative) of CSS, I have never written the relevant ones myself. Effect!
After working for a long time, it is finally finished! I also understood these two attributes a little better!

The summary is as follows:

First look at the following layer structure

This layer only applies position: relative; style

This layer only applies position: absolute; style

Do not apply style

1. Absolute: does not occupy space, relative: does occupy space Bit!

Such as the upper structure:

The layer with id rel will occupy one line when displayed! The abs layer behind it will only be displayed on the next line!
When the layer with the id of abs is displayed, it will overlap with the layer with the id of sss!

2. By default (positioning is not combined with top, etc.), absolute positioning is based on the parent layer
For example, if the layer with the id of abs above is not positioned with top, etc. , its display position will follow the parent posi layer (posi is in the lower left corner of the document, and it will also be in the lower left corner)

3. When combining top, bottom, right, left and other attributes, absolute positioning ) uses the window as the positioning, and relative uses its own occupancy as the baseline for offset! As follows:

Do not apply style

This layer applies position: relative; bottom: 30px; style

This layer only applies position: absolute; bottom: 30px; style

div>



The above code:
The layer with id rel will move up and overlap with the layer id sss
The layer id is abs will move up The window is the baseline, move it to a position 30 pixels away from the window!

4. When combining top, bottom, right, left and other attributes, if you want absolute positioning to use the parent layer as the positioning baseline, you can apply the absolute or relativ attribute on the parent layer! As follows:

This layer applies position: relative;bottom ：30px; style

This layer only applies position: absolute; bottom: 30px; style

The above code: the layer with id posi can also use the absolute attribute!
The layer whose id is rel will not be affected, and will be offset using its own placeholder as the baseline!

The layer with the id of abs uses the bottom edge of the posi layer with the id as the positioning baseline. If the height of the posi layer is less than 30px at this time, the abs layer may not be visible!