Detailed explanation of positioning and positioning application of div css

Extended reading
* Interpretation of absolute and relative a>
* position: relative/absolute level that cannot be broken
* Supplement to the article "Unbreakable Levels"

Positioning has always been a difficult point in the application of WEB standards. If the positioning is not clear, the effect that should be achieved may not be achieved, and the achieved effect may be distorted. If the principle of positioning is clarified, positioning will make the web page more perfect.

Definition of positioning:

The content about positioning in CSS is ：position:relative | absolute | static | fixed

static There is no special setting, it follows the basic positioning regulations and cannot be hierarchical through z-index.
relative does not break away from the document flow, refers to its own static position through top, bottom, left, right positioning, and can be hierarchical through z-index.
Absolute is separated from the document flow and positioned through top, bottom, left, and right. Select its nearest parent positioning element. When the parent position is static, the absolute element will be positioned at the origin of the body coordinates and can be hierarchically graded through z-index.
fixed fixed positioning, here the fixed object is the visual window rather than the body or parent element. Hierarchical classification can be done through z-index.

Cascading grading of positioning in CSS: z-index: auto | namber;

auto follows the positioning of its parent object
namber A unitless integer value. Can be negative

Principle of positioning:

Elements that can be displaced (relative positioning)

In the text flow, any element has its own position limited by the text flow, but through CSS we still make these Elements can change their position. We can use float to float the element, and we can also use margin to move the element's position. But in fact, that is not the real displacement, because it is just a deception achieved by increasing the margin value. The displacement in the real sense is generated by top, right, bottom, left (hereinafter referred to as TRBL, TRBL can be divided into two parts) for a relatively positioned element.

And we note that the coordinate point of the positioned element is at the upper left edge point of the margin value, which is point B in the figure. Then all displacement calculations will be based on this point to push the element. The direction of displacement is cohesive when TRBL is positive. It can be deduced that when TRBL is negative, the direction of displacement is outward. In the picture, there is a displacement arrow pointing to the mark. The plus sign indicates the positive displacement direction, and the minus sign indicates the negative displacement direction. Regarding the displacement direction, you can further read Yi Fei's "Talk about the margin attribute from the simple to the deep (1)"

Elements that can be in any position (absolute positioning)

As mentioned above: Relative positioning can only move the position up, down, left, and right in the text flow. It also has certain limitations. Although its presentation area is separated from the text flow, it is still retained in the text flow. A place is like a migrant worker who goes to another place, but still has a place exclusive to him in his hometown, and this place does not change with his movement. But this will obviously leave a blank space. If you want the text flow to abandon this part, you need to use absolute positioning. Absolute positioning not only breaks away from the text flow, but also does not leave an exclusive space for this absolutely positioned element in the text flow. This is like a position in a factory. If one worker leaves, other workers will naturally fill the position. The part that moves out naturally becomes a free body. Absolute positioning will set the element to any position through TRBL. When the position property of the parent layer is the default value, the coordinate origin of TRBL starts from the coordinate origin of the body.

Associated absolute positioning

The above is a single absolute positioning, but in actual applications we often A special form will be required. That is, you want the positioned element to have absolute positioning characteristics, but you also hope that the coordinate origin of the absolute positioning can be fixed at a certain point in the web page. When this point is moved, the absolutely positioned element can ensure its relative position relative to the original coordinates. That is to say, this absolute positioning needs to move with the web page and be fixed at a fixed position on the web page. Usually this effect is particularly important when the web page is centered. The basic way to achieve this effect is to set the absolutely positioned parent to relative positioning or absolute positioning. Then the coordinates of absolute positioning will take the parent as the starting point of the coordinates.

Although this is the case, the coordinate origin is not the parent coordinate origin. This is a very strange coordinate position.

Elements that are always in sight (fixed positioning)

Due to the abuse of advertising, some browser software has begun With ad content blocking, some great effects are no longer recommended. For example, an element may continuously change its position as the web page scrolls. Now I can achieve such an effect through a positioning attribute in CSS. This element attribute is position:fixed, which was not supported in the past; its meaning is: fixed positioning. This fixing is very similar to absolute positioning. The only difference is that absolute positioning is fixed at a certain position in the web page, while fixed positioning is fixed at the browser's view frame position.

Although the original browser did not support this attribute, the development of browsers has enabled today's advanced browsers to correctly parse this CSS attribute. And through CSS HACK, IE6 can achieve this effect (currently IE5.x cannot achieve this effect). In order not to make this article become a long article, only this example is given here to end this article. You can analyze some issues about this example by yourself. If you don’t understand something, please leave me a message!