In css position attribute: the difference between absolute and relative

If you use position to lay out the page, the position attribute of the parent element must be relative, and for elements positioned somewhere inside the parent, it is best to use Absolute, because it is not affected by the padding attribute of the parent element. Of course, you can also use position, but don’t forget the value of padding when calculating. ”

The default position attribute value of any element is static, static. Today 51RGB Q group 186242343 mainly talks about relative (relative) and absolute (absolute).

[position:absolute]
means: He means absolute positioning, which defaults to the upper left corner of the browser , combined with TOP, RIGHT, BOTTOM, LEFT (hereinafter referred to as TRBL) for positioning, has the following attributes:
1) If there is no TRBL, use the upper left corner of the parent, in When there is no parent, it refers to the upper left corner of the browser. If there is text without a parent element, it will be positioned with the upper right corner of the last text in front of it as the origin but without breaking the text and covering it above. .
2) If TRBL is set and the parent does not set the position attribute, then the current absolute will be positioned with the upper left corner of the browser as the original point, and the position will be determined by TRBL.
3) If TRBL is set and the parent sets the position attribute (whether it is absolute or relative), the upper left corner of the parent is used as the origin for positioning, and the position is determined by TRBL. Even if the parent has a Padding attribute, it has no effect on it. To put it simply: it only insists on one point and uses the upper left corner of the parent as the origin for positioning. The parent's padding has no effect on it at all.

It can be concluded from the above three points that if you want to position an element with absolute positioning attribute within its parent element, only two conditions must be met,
First: Set TRBL
Second: Set the Position attribute of the parent
The above summary is very important to ensure that you are using absolue to layout the page will not be misaligned, and will not change with the size of the browser or the size of the display resolution.
As long as there is any dissatisfaction, the element will take the upper left corner of the browser as the origin. This is where beginners tend to make mistakes. When the size of the positioned section changes, the parent The element will change accordingly, but the position of the section and parent element whose Position attribute is set to

absolute has changed and become misaligned. This is because the element is positioned in the upper right corner of the browser. The reason why the angle is the origin.
It is easy for beginners to make mistakes if they do not know the section whose Position attribute is absolute. If they want to position it in the parent section, and when the size of the browser changes or the resolution of the monitor changes, the layout will change. If there is no change, two conditions need to be met. As long as one of them is not met, the element will take the upper left corner of the browser as the origin, causing page layout to be misaligned.

[position:relative]
means relative positioning. It refers to the original point of the parent as the original point by default. If there is no parent, the bottom of the previous element in the order of text flow will be used as the original point, and TRBL is used for positioning. When there are CSS attributes such as padding in the parent, the original point of the current level will be based on the original point of the parent content area. Positioning has the following attributes:
1) If there is no TRBL, it is based on the upper left corner of the parent. When there is no parent, it refers to the upper left corner of the browser (go here and absolute first) Same), if there is text without a parent element, the bottom of the text is used as the original point for positioning and the text is disconnected (different from absolut).
2) If TRBL is set and the parent does not set the position attribute, the upper left corner of the parent will still be used as the origin for positioning (different from absolut)
3) If TRBL is set and the parent sets the position attribute (whether absolute or relative), the upper left corner of the parent is used as the origin for positioning, and the position is determined by TRBL (the first half is the same as absolute). If the parent has the Padding attribute, then the upper left corner of the content area is used as the origin for positioning (the second half is different from absolute).

It can be concluded from the above three points that regardless of whether the parent exists or not, whether there is TRBL or not, the upper left corner of the parent is positioned, but the Padding attribute of the parent will its impact.
Based on the above description of relative, we can regard the p whose position attribute is relative as an ordinary p that can be positioned using TRBL, or in other words, we only need to add position to the CSS attribute of p in our usual layout page. After :relative, you can not only use float to layout the page, but also use TRBL to layout the page. In other words, adding position:relative p can also layout the page like a normal p, but you can also use TRBL to layout the page. page. But the position attribute is absolute It cannot be used to layout the page, because if used for layout, all p's will be positioned relative to the upper left corner of the browser, so it can only be used to position an element somewhere inside an element with the absolute attribute. In this way, we can summarize the more important conclusions. Since the element with the absolute attribute is used to locate the position of an element in the parent, TRBL is indispensable. At this time, according to the third article of absolute mentioned at the beginning, if the parent element does not
position attribute, then the absolute element will be separated from the parent element, but if it is a layout page, the position attribute of the parent element cannot be absolute, otherwise the upper left corner of the browser will be the origin, so the parent element The position attribute of level elements can only be relative!

Elements with the relative attribute can be used to layout the page, and elements with the absolute attribute can be used to locate the position of an element in the parent

Summary: If position is used to lay out the page, the position attribute of the parent element must be relative. For elements positioned at a certain position inside the parent, it is best to use absolute, because it is not affected by the padding attribute of the parent element. Of course you can also use position, but don’t forget the value of padding when calculating.
But positioning has a disadvantage, it does not adapt to the height of internal elements, so when we usually lay out the page, if the height of one or some modules never changes, it can Use positioning, but Fan recommends that when laying out the page, you should still use Float as the main method and Position as a supplement! Only in this way can you create high-quality pages.

Finally, please remember my words: "When laying out a page, Float is the main one and Position is the secondary one!"

The above is the detailed content of In css position attribute: the difference between absolute and relative. For more information, please follow other related articles on the PHP Chinese website!