Overview and application of position attributes (absolute|relative|static|fixed) in CSS

Let's first look at the definition of the position attribute in CSS3 Api:

• static: No special positioning, the object follows the normal document flow. The top, right, bottom, left, etc. properties will not be applied.
• relative: The object follows the normal document flow, but will be offset in the normal document flow according to the top, right, bottom, left and other properties. The stacking is defined by the z-index property.
• absolute: The object is separated from the normal document flow and is absolutely positioned using properties such as top, right, bottom, and left. The stacking is defined by the z-index property.
• fixed: The object is separated from the normal document flow and is positioned using the window as a reference point using the top, right, bottom, left and other properties. When a scroll bar appears, the object does not scroll with it. The stacking is defined by the z-index property.

How about it? Are you still confused? It doesn’t matter. Let me explain it to you one by one from a few basic concepts:

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 be out of the document flow: floating , absolute positioning , and relative positioning .

Static positioning (static):

static, no special positioning, it is the default positioning mode of HTML elements, that is, when we do not set the position attribute of the element, the default position value is static, it follows the normal document flow object, the object occupies the document space, under this positioning mode, the top, right, bottom, left, z-index and other attributes are invalid.

Relative positioning:

Relative positioning, also known as relative positioning, can be interpreted literally as the main feature of this attribute: relative. But relative to what? This is the key point, and it is also the most confusing part for me. Now let's do a test, I think everyone will understand:

(1) Initially not positioned

(2) We modify the position attribute of the first element:

-- >> The dotted line is the initial position space

Now you understand, relative positioning is relative to its original position in the document flow, and we also know that relative positioning also follows the normal document flow, it does not deviate from the document flow, but its top/left/right/bottom attributes are effective, it can be said that it is an intermediate transition attribute from static to absoult, the most important thing is that it still occupies document space, and the document space occupied will not change with the offset of top/right/left/bottom attributes, that is to say, the elements behind it are positioned according to the dotted line position (before top/left/right/bottom attributes take effect), this must be understood.

OK, so we know that the top / right / left / bottom properties will not offset the document space occupied by a relatively positioned element, but will margin / padding offset that document space? The answer is yes. Let's do an experiment together:

(3) Add margin attribute:

By comparison, isn't it very clear? We first set the margin of the first element to 20px, then the second element has to be offset downward by 40px, so the margin occupies the document space! Similarly, you can measure the effect of padding by yourself!

Absolute positioning:

Absoulte positioning, also known as absolute positioning, although its name is "absolute", its function is closer to the word "relative". Why do you say that? It turns out that after an element positioned using absoulte leaves the document flow, it can only be positioned based on an ancestor element (above the parent), and this ancestor must be positioned in a position non-static manner. For example, if the a element is positioned using absoulte, it will start from the parent class, looking for an ancestor element positioned in a position non-static manner (note that it must be a direct ancestor~), until the <html> tag. It should also be noted here that the relative and static methods use the <body> tag as the origin for positioning in the outermost layer, while the absoulte method uses <html> as the origin for positioning when there is no parent and it is position non-static. The <html> and <body> elements differ by about 9px. Let's take a look at the effect:

(4) Add the absoulte attribute:

Haha, after reading the above code, careful friends will definitely ask, why do we need to add top:0; left:0; attributes to absoulte positioning? Isn’t this redundant?

In fact, it is absolutely necessary to add these two attributes, because if we use absolute or fixed positioning, we must specify at least one of the left, right, top, and bottom attributes. Otherwise, the left/right/top/bottom attributes will use their default value of auto, which will cause the object to follow the normal HTML layout rules and be rendered immediately after the previous object . In short, they all become relative and will take up document space. This is very important. Many people find that they are not out of the document flow after using absolute positioning. This is the reason. Pay special attention here~~~

It won’t work if the left/right/top/bottom attributes are missing, so what if we set more? For example, if we set the top and bottom attribute values ​​at the same time, where should the element be offset? Remember the following rules:

• If top and bottom exist together, only top takes effect.
• If left and right exist together, only left takes effect.

Since the absoulte is positioned according to the position non-static element in the ancestor class, will the margin/padding in the ancestor class affect the position? Let’s look at an example first:

(5) Add margin/padding attributes to the absoulte positioning:

I understand that the margin of the ancestor class will cause the absoulte of the subclass to shift, but padding will not cause the absoulte of the subclass to shift. To sum up, absoulte is positioned according to the border of the ancestor class.

Note: Absolutely positioning an object outside the visible area will cause scroll bars to appear. If you place a relatively positioned object outside the visible area, the scroll bar will not appear.

Fixed positioning:

Fixed positioning, also known as fixed positioning, is the same as absolute positioning in that it is separated from the document flow and can be positioned according to the top, right, left, and bottom attributes. The difference is that fixed positioning is offset based on the window as the origin, which means that it will not offset according to the scrolling of the scroll bar.

z-index property:

z-index, also known as the stacking order of objects, uses an integer to define the stacking level. The larger the integer value, the higher it is stacked. Of course, this refers to the stacking between elements of the same level. If this attribute of two objects has the same value, they will be stacked according to the order in which they flow in the HTML document, and the one written later will cover the one in front. It should be noted that the parent-child relationship cannot be set using z-index. The child must be on top and the parent must be on the bottom.

Note: The z-index property of elements using static positioning or no position positioning is invalid.