In-depth study on the usage of position attribute in DIV CSS layout_html/css_WEB-ITnose

This article describes to you the usage of the position attribute in DIV CSS layout. The position attribute mainly has four attribute values. The default position attribute value of any element is static. This lesson mainly talks about relative and absolute.

How to learn the position attribute of DIV CSS layout

If you use the position attribute to layout the page, the position attribute of the parent element must be relative, and the element positioned at a certain position inside the parent, It's best to use absolute. Positioning and laying out the page is very easy. You just need to remember the last sentence of this lesson. If it is difficult, it is quite difficult to understand and requires a certain amount of patience. But fortunately, KwooJan has summarized it for everyone. Very easy to understand.

If the following text is really difficult to understand, then remember the sentence summarized at the end of this lesson: "If position is used to lay out the page, the position attribute of the parent element must be relative, and the position attribute of the parent element must be relative. For elements at a certain position within the level, 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 padding value when calculating. ”

The default position attribute value of any element is static. This lesson mainly talks about relative and absolute.

[position attribute of DIV CSS layout: absolute]

means: it means absolute positioning. By default, it refers to the upper left corner of the browser, with TOP, RIGHT, BOTTOM, LEFT ( (hereinafter referred to as TRBL) for positioning, has the following attributes:

1) If there is no TRBL, the upper left corner of the parent is used. When there is no parent, it refers to the upper left corner of the browser. If there is no parent, In the case of an element, if there is text, 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.

The above three points can be summarized. 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 when you use absolue to layout the page, it will not be misaligned, and it will change with the size of the browser or The size of the monitor resolution does not change.

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 element will change accordingly. has changed, but the position of the section and the parent element whose Position attribute is set to absolute has changed and become misaligned. This is because the element takes the upper right corner of the browser as its origin at this time.

An easy mistake for beginners is not to know the section whose Position attribute is absolute. If you 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 not 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 its origin, causing the page layout to be misaligned.

[DIV CSS layout position attribute: relative]

means relative positioning. It refers to the original point of the parent as the original point by default. If there is no parent, it will be in the order of the text flow. The bottom of the previous element is the original point, which is positioned with TRBL. When there are CSS attributes such as padding in the parent, the original point of the current level is positioned with reference to the original point of the parent content area. It has the following attributes:

1) If there is no TRBL, refer to the upper left corner of the parent. When there is no parent, it refers to the upper left corner of the browser (this is the same as the absolute first item here). If there is no parent element, If text exists, the bottom of the text will be used as the original point for positioning and the text will be disconnected (different from absolutet).

2) If TRBL is set, and the parent does not set the position attribute, positioning will still be based on the upper left corner of the parent (different from absolutet)

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 (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). www.jbxue.com

It can be concluded from the above three points that no matter whether the parent exists or not, whether there is TRBL or not, the positioning is based on the upper left corner of the parent, but the Padding attribute of the parent will affect it.

Based on the above description of relative, we can regard the DIV whose position attribute is relative as an ordinary DIV that can be positioned using TRBL, or as long as we add the CSS attribute of the div in our usual layout page After adding position: relative, you can not only use float to layout the page, but also use TRBL to layout the page. In other words, the DIV with position: relative can also layout the page like a normal DIV, but you can also use TRBL lays out the page. However, the position attribute with absolute cannot be used to layout the page, because if used for layout, all DIVs will be positioned relative to the upper left corner of the browser, so it can only be used to position an element on an element with the absolute attribute. somewhere inside.

In this way we can summarize the more important conclusions:

Elements with a relative attribute can be used to layout the page, and elements with an absolute attribute are used to position an element in the parent. 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 have a position attribute, 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 position attribute of the parent element can only be relative!

Summary:

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 It is not affected by the padding attribute of the parent element. Of course, you can also use position, but don't forget the padding value when calculating.