CSS positioning layout (position, positioning layout skills)

1. What is positioning?

The position attribute in CSS has four values: absolute/relative/fixed/static (absolute/relative/fixed/static (default)). Through the positioning attribute, you can set some irregular layouts and use TLBR (top, left, bottom, right) to adjust the element position.

2. Description of each attribute value:

static (static) has no special settings, follows basic positioning regulations, cannot be hierarchical through z-index, and has default attributes for each element in the normal flow. Relative objects cannot be stacked or separated from the document flow, and are positioned with reference to their own static position using top, bottom, left, or right. Absolute (absolute positioning) is out of the document flow and positioned by top, bottom, left, and right. Select the nearest parent object with the most positioning settings for absolute positioning. If the parent of the object does not have a positioning attribute set, the absolute element will be positioned at the origin of the body coordinates. fixed (fixed positioning) The fixed reference object here is the visible window rather than the body or parent element. Elements that use fixed will not scroll as the window scrolls. Belongs to the subset of absolute.

3. The specific role of each attribute value:

A.static: (static, default property) is usually not used, but there are some scenarios where you want to change the value of position from other values ​​to the default.

B.relative: (Relative positioning) An element is set with position:relative. Because it does not leave the text flow, if TLBR (top, left, bottom, right) is not set, its position will not be changed and will not affect the current layout, which is equivalent to nothing happening. If TLBR is set, the element can be offset in the specified direction, but its original position is still occupied. An example is shown in the figure:

Figure 1: Setting position: relative for child-1

Figure 2: Adjust the position of child-1 top: 20px left: 20px

C.absolute: (absolute positioning), completely out of the text flow (normal flow), the original position is no longer occupied, and TLBR can be set to move arbitrarily;

As a special note, if absolute is set for an element and its parent element has no position set: absolute/relative/fixed, the body will be its parent.

Figure 1:

Figure 2:

Figure 3:

D.fixed : (fixed positioning), will not scroll with the page. No pictures will be posted here. The most vivid example is those small web ads. You scroll the page, but it is always on the right or left side of the web page, following you.

4. Positioning layout skills: position: relative and position: absolute are used together:

As mentioned above, if absolute is set for an element, and none of its parent elements have position:relative set, the body will be its parent. In this case, it will be difficult for us to locate the element to our target position, and it will be troublesome to measure pixels. Image Description:

Figure 1: Initial state

Figure 2: Set position: absolute for box-chd-chd and set top: 0, left: 0. You can see that it takes the upper left corner as the starting point from the body as the parent.

Figure 3: Setting position: relative for box, you can see that box-chd-chd now uses box as its parent

Figure 4: Set position: relative for box-chd again, and you can see that box-chd-chd takes box-chd as its parent

It can be seen that when the child sets position: absolute, and its parent sets position: relative, the child will move from the upper left of the parent element as the starting point and follow the proximity principle , that is, the child looks for the parent upwards, and when the first parent with relative is found, its upper left is used as the starting point.

The combination of relative and absolute makes positioning layout more convenient, and the distance required to move is also reduced. There is no need to measure pixels from the entire page starting from the body. It is also easy to manage and has a clear structure.

Summary: The previous article wrote about float layout techniques, and this chapter is about position. It can be seen that both position and float are a kind of layout method, and each has its own application scenarios. You can choose the layout method according to your needs.