Position positioning is an attribute that people love and hate.

Regarding the position attribute in CSS, when used, sometimes it is very powerful, and sometimes it is very helpless.

When it is powerful, when it is inconvenient to use margin or padding for some small objects in the div, give position:absolute; and then equip it with left, right, top and bottom. Basically, you can put it wherever you want.

The frustrating part is that once we abuse the position attribute, our layout will fly all over the sky. And because the z-index is not set properly, basically, the overall layout will make you at a loss. , it is very troublesome to find the reason. In the end, I am afraid I can only tear it down and redo it.

So, when dealing with the position attribute, we need to understand in detail the principle of its operation and the application scenarios, so that we can perfectly drive it to achieve the effect we want when we want to use it.

No more nonsense, let’s go straight to the steps. Let’s talk about the concept of position first

position, when we search on Baidu, we will know that this word means orientation. In CSS, it means positioning. The attribute name is position, and there are five attribute values, namely static (default positioning), absolute (absolute positioning) ), relative (relative positioning), fixed (fixed positioning), inherit (inherited positioning, not commonly used).

Writing rules:

position:static|absolute|relative|fixed|inherit

Let’s introduce each attribute value

1. position:static (default positioning)

As the name suggests, when we usually write, the default layout of each div in the document flow is the static attribute value. It will not let the div or other elements break away from the document flow, but follow the principles of layout, from top to bottom. There are general principles for block-level elements to wrap, and inline elements not to wrap, etc. Therefore, if the positioning attribute is not used, then this position does not need to be set.

2. position: relative (relative positioning)

是 The relative positioning is that it is deemed to be moved by itself. It will not leave the document flow, that is, I set this attribute for an element, so this file will move back and forth in this document stream. As for what to do, how do you do? Moving will be discussed below.

3. position: absolute (absolute positioning)

                                                                                                                                                                                                                                                                                                   .

If all child elements in the parent element are set to absolute, then all the child elements will float and then stack together, so in order to spread out each element and display it, we need to move these elements, and the method of moving these elements , that is, write directly in the style sheet: four attributes: left, right, top, bottom, and then write px (pixel), % (percentage) and other units that can express distance after the attributes. Here, we would like to emphasize that left and right cannot be used at the same time, and top and bottom cannot be used at the same time. 　And, these four elements are all moved relative to the parent element with relative positioning (relative) attributes. If the parent element does not have relative positioning, then absolute positioning is relative to the body. 　So, in order to prevent the elements you set from running away, remember to set relative to the parent element.

　4. fixed (fixed positioning)

　This positioning is relative to the browser window, and the movement method is the same as relative and absolute positioning. 　It will also break away from the copy flow. Our common sidebars or advertising images are implemented using this function. Very practical and powerful function.

　

5. Inherit (inherited positioning) is to inherit the position positioning attribute from the parent element, which is not very commonly used.

　 Speaking of which, we are involved in the issue of

z-index

(level). As we just said, if absolute is set to all child elements, then all the child elements will be stacked together and cover each other. 　If we need to stack multiple layers on one element, how to sort them? This requires the use of the z-index attribute.

　The attribute value of the z-index attribute is a number. The larger the number, the more accurate it will be, for example,

　The elements with z-index=0 will be displayed below z-index=1, and z-index=10 will be displayed above z-index=8. Therefore, just stack their display order and set z-index. .

　 Of course, if z-index is not set, by default, the later elements will cover the previous elements.

　

Issues to note when using:

　1. The float attribute cannot be shared with the position attribute, remember!

　2. When using absolute, remember to add relative to the parent element

　3. In addition to left and top, there are also right and bottom, learn and use them

　 4. If you don’t need position, don’t use position. After all, it’s easy to mess up the layout 　5. The method of calling position in Javascript is: div.style.positio="absolute" is similar. div is the variable name

The above just briefly talks about the basics of position. If you don’t get the answer you want here, you can leave me a message below and I will actively reply.

Finally, communicate actively and make progress together!