When using CSS+DIV for layout, the four attribute values of position, relative, absolute, static, and fixed, are not clearly divided, so that there are often very depressing results. I researched it today and I finally understand it. Summarize here:
Look at the definition of each attribute value first:
1, static (static positioning): default value. Without positioning, the element appears in the normal flow (ignoring top, bottom, left, right or z-index declarations).
2, relative (relative positioning): Generate relatively positioned elements, which are positioned relative to their normal (original) position through the settings of top, bottom, left, and right. Hierarchical grading can be done through z-index.
3. Absolute (absolute positioning): Generate absolutely positioned elements, which are positioned relative to the first parent element other than static positioning. The position of the element is specified by the “left”, “top”, “right” and “bottom” attributes. Hierarchical grading can be done through z-index.
4. Fixed (fixed positioning): Generate absolutely positioned elements and position them relative to the browser window. The position of the element is specified by the “left”, “top”, “right” and “bottom” attributes. Hierarchical grading can be done through z-index.
The positioning methods of static and fixed are well understood, so I won’t analyze them here. The following is an analysis of more relative and absolute applications:
1, relative
elements positioned as relative Out of the normal text flow, but its position in the text flow still exists.
he defaults to refer to the original point of the parent as the original point. If there is no parent, the original point is at the bottom of the previous element in the order of the text flow, and is positioned with TRBL. When there is padding in the parent When waiting for the CSS properties, the original point of the current level is positioned with reference to the original point of the parent content area, with the following properties:
1) If there is no TRBL, use the upper left corner of the parent, when there is no parent When, he refers to the upper left corner of the browser (this is the same as the first absolute). If there is text without a parent element, the bottom of the text is the original point for positioning and the text is disconnected ( Unlike absolut).
2) If TRBL is set, and the parent does not set the position attribute, it still uses the upper left corner of the parent as the origin for positioning (different from absolut).
3) If TRBL is set, and the position attribute of the parent is set (either absolute or relative), then the upper left corner of the parent is used as the origin for positioning, and the position is determined by TRBL (the first half and absolute Same). If the parent has the Padding attribute, then use the upper left corner of the content area as the origin for positioning (the second half is different from absolut).
The above three points can be summed up. Regardless of 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 property of the parent will affect it.
Based on the above description of relative, we can treat the DIV with the position attribute as relative as an ordinary DIV that can be positioned with TRBL, or just add position to the CSS attribute of the div that we usually lay out the page After :relative, not only use float to layout the page, but also use TRBL to layout the page, or the DIV with position:relative can also be used to layout the page like ordinary DIV, but you can also use TRBL for layout. page. But the position attribute is absolute and cannot be used to layout the page, because if it is used for layout, all DIVs are positioned relative to the upper left corner of the browser, so it can only be used to position an element on an element with an absolute attribute. Somewhere inside.
The value of Top indicates the distance that the object is offset downward from the original position, and the value of bottom indicates the distance the object is offset upward from the original position. When the two exist at the same time, only Top works.
The value of left indicates the distance the object is offset to the right from the original position, and the value of right indicates the distance the object is offset to the left from the original position , When the two exist at the same time, only left works.
as shown in Figure 1:
The layer with the yellow background is positioned as relative, and the red border area is its position in the normal flow. After positioning it by top and left, it can be seen from the position of the gray background layer that its normal position still exists.
2, absolute
The layer positioned as absolute is separated from the normal text flow, but the difference from the relative is that it is in the normal The position in the stream no longer exists.
This attribute is always misleading. It is actually wrong to say that when the position attribute is set to absolute, it is always positioned according to the browser window. In fact, this is the characteristic of the fixed attribute.
1) If there is no TRBL (top, right, bottom, left), use the upper left corner of the parent. When there is no parent, it refers to the upper left corner of the browser. If there is no parent element If there is text, it will be positioned with the upper right corner of the last text before it as the origin, but the text will not be broken and will be overlaid on the top.
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 position attribute of the parent is set (no matter 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 the Padding property, it does not work. The simple point is: it only insists on a point, and uses the upper left corner of the parent as the origin for positioning. The padding of the parent has no effect on it at all.
The above three points can be summed up. If you want to locate an element whose positioning attribute is absolute within its parent element, only two conditions must be met:
First: set TRBL
Second: Parent setting Position property
The above summary is very important, to ensure that you will not be dislocated when you use absolue to lay out the page, and follow the browsing The size of the monitor or the size of the display resolution remains unchanged.
As long as there is a little dissatisfaction, the element will start from the upper left corner of the browser. This is a point that beginners are easy to make mistakes. When the size of the browser is changed, the parent element will It changes with it, but the position of the panel and the parent element that set the Position property to absolute has changed and misplaced. This is because the element takes the upper right corner of the browser as the origin at this time.
It’s easy for beginners to make a mistake that it’s not clear that the Position attribute is absolute. If you want to locate the parent plate, and when the size of the browser changes or the resolution of the display changes, the layout does not change, it is necessary If the two conditions are met, as long as one point is not met, the element will start from the upper left corner of the browser, which will cause the page layout to be misplaced.
The value of Top represents the distance between the top border of the object and the top of the browser window, and the value of bottom represents the distance between the bottom border of the object and the bottom of the browser window. When both exist, Only Top works; if neither is specified, its top will be in the same position as the original document stream, that is, the vertical position will remain unchanged.
The value of left represents the distance between the left border of the object and the left side of the browser window, and the value of right represents the distance between the right border of the object and the right side of the browser window. When both exist, Only left works; if neither is specified, its left side will be consistent with the original document stream position, that is, the horizontal position remains unchanged.
While the Position attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandfather object, or the higher generation, the same) when the Position attribute value is Relative, the above-mentioned relative The browser window positioning will become relative to the parent object positioning, which is very helpful for precise positioning.
3. The main difference between relative and absolute
First of all, it is the presence or absence of the position in the normal flow that has been mentioned above.
Secondly, the relative positioning layer is always relative to its nearest parent element, regardless of the positioning method of its parent element. As shown in Figure 3:
In the figure, the red background layer is relative positioning, and the green background layer of its direct parent element is the default static positioning. The position of the red background layer is 20 elements relative to the top and left of the green background layer. And if the red background layer is positioned as absolute, the situation is as follows:
As you can see, the red background layer still defines top: 20px; left: 20px; but its The relative element becomes the yellow background layer with the positioning method absolute or relative. Therefore, the absolute positioning layer is always relative to its nearest parent layer defined as absolute or relative, and this parent layer is not necessarily its direct parent layer. If absolute or relative is not defined in its parent layer, it will be positioned relative to the body, as shown in the figure:
Except for top, left, right, and bottom positioning, the definition of the margin attribute value also conforms to the above rules.
Summary:
Elements with relative attributes can be used to lay out the page, and elements with absolute attributes are used to locate the position of an element in the parent , Since the element whose attribute is absolute 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 at the beginning, if the parent element does not have a position attribute, then the absolute element will leave 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!
If you use position to lay out the page, the position attribute of the parent element must be relative, and the element positioned at a certain position within the parent should 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 value of padding when you calculate it.
Note:absolute positioning Objects outside the visible area will cause scroll bars to appear. When placing a relative positioning object outside the visible area, the scroll bar will not appear.
What is document flow?
Divide the form into rows from top to bottom, and arrange the elements in each row from left to right, which is the document flow.
There are only three situations that will cause an element to leave the document flow, namely: floating absolute positioning and relative positioning.
z-index attribute
z-index, also known as the stacking order of objects, uses an integer to define the stacking level. Larger, it will be stacked on top. Of course, this refers to the stacking of elements at the same level. If this attribute of two objects has the same value, then they will be stacked according to the order in which they flow in the HTML document. Cover the previous ones. It should be noted that the parent-child relationship cannot use z-index to set the upper-lower relationship. The child must be at the upper level and the parent at the lower level.
Note: The z-index attribute of an element that uses static positioning or no position positioning is invalid.
