Detailed explanation of position attribute (absolute | relative | static | fixed) in CSS_html/css

Let’s first take a look at the relevant definitions of the position attribute in CSS3 API:

static: No special positioning, the object follows the normal document flow. Properties such as top, right, bottom, and left will not be applied.

relative: The object follows the normal document flow, but will be offset in the normal document flow based on top, right, bottom, left and other attributes. And its cascading is defined through the z-index attribute.

absolute: The object is separated from the normal document flow and uses top, right, bottom, left and other attributes for absolute positioning. And its cascading is defined through the z-index attribute.

fixed: The object is separated from the normal document flow. Use top, right, bottom, left and other attributes to position the window as a reference point. When the scroll bar appears, the object will not scroll with it. And its cascading is defined through the z-index attribute.

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 a 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 elements to break out of the document flow, namely: floating, absolute positioning and relative positioning.

Static positioning (static):

static, no special positioning, it is the default positioning method of html elements, that is, we do not set The default position value of the element's position attribute is static. It follows the normal document flow object and the object occupies the document space. In this positioning method, top, right, bottom, left, z-index and other attributes are invalid.

Relative positioning (relative):

Relative positioning, also known as relative positioning, parsing it literally, we can see that Main characteristics of properties: Relative. But what is it relative to? This is an important point and the one that confuses me the most. Now let’s do a test. I think everyone will understand:

(1) Initial unpositioned

<style type="text/css">      #first { width: 200px; height: 100px; border: 1px solid red; }      #second{ width: 200px; height: 100px; border: 1px solid blue;}  </style>  <body>  <div id="first"> first</div>  <div id="second">second</div>  </body>

Copy after login

Initial original image:

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

<style type="text/css">      #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/      #second{width: 200px; height: 100px; border: 1px solid blue;}  </style>

Copy after login

After relative offset of 20px:

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

Now you understand, relative positioning is relative to the offset of its original position in the document flow, and we also know that relative positioning also follows the normal document flow. It does not break away from the document flow, but its top/ The left/right/bottom attribute is valid. It can be said that it is an intermediate transition attribute from static to absolute. The most important thing is that it also occupies document space, and the document space occupied will not be affected by top / right / left / bottom and other attributes. changes due to its offset, which means that the elements behind it are positioned according to the dotted line position (before attributes such as top / left / right / bottom take effect). This must be understood.

Well, we know that the top / right / left / bottom attributes will not offset the document space occupied by the relative positioned element, so will margin / padding offset the document space? ? The answer is yes, let’s do an experiment together:

(3) Add margin attribute:

<style type="text/css">      #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/      #second{width: 200px;height:100px;border: 1px solid blue;}  </style>

Copy after login

After setting margin: 20px:

Compare it, is it very clear? Let’s first set the outer margin of the first element If it is set to 20px, then the second element will be offset downward by 40px, so the margin will occupy the document space! In the same way, you can test the effect of padding yourself!

Absolute positioning (absoulte):

Absoulte positioning is also called absolute positioning. Although its name is "absolute", Its function is closer to the word "relative". Why do you say this? It turns out that after elements positioned using absolute are out of the document flow, they can only be positioned based on ancestor class elements (parent class or above), and this ancestor class must be positioned in a postion non-static manner. For example, the a element uses absolute Positioning, it will start from the parent class and look for ancestor elements positioned in a non-static position (note, it must be a direct ancestor~) until the tag. What needs to be noted here is that, The relative and static methods use the tag as the origin of positioning when the outermost layer is used, while the absolute method uses as the origin when there is no parent and position is not static positioning. The difference between the and elements is about 9px. Let’s take a look at the effect:

(4) Add absolute attributes:

<html>  <style type="text/css">      html{border:1px dashed green;}      body{border:1px dashed  purple;}      #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}      #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}  </style>  <body>  <div id="first">relative</div>  <div id="second">absoult</div>  </body>  </html>

Copy after login

Rendering:

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

如果top和bottom一同存在的话，那么只有top生效。

如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absoulte定位中添加margin / padding属性：

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}  #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}  <div id="first">first  <div id="second">second</div>  </div>

Copy after login

效果图：

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

固定定位(fixed)：

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。

Detailed explanation of position attribute (absolute | relative | static | fixed) in CSS_html/css_WEB-ITnose