Understanding position of CSS

The four attribute values ​​​​of

position:

1. relative
2. absolute
3. fixed
4. static

 

demo1

 

demo2

1. relative

relative attribute is offset relative to its own position. If you set a relative attribute of demo1, for example, set the following CSS code:

#demo1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}

My understanding is that if the relative attribute is not set, the position of demo1 should be in a certain position according to the normal document flow. But when the position of demo1 is set to relative, it will be offset according to its supposed position according to the values ​​​​of top, right, bottom, and left. The "relative" meaning of relative is also reflected in this.

Just remember where demo1 should be if relative is not set, and once it is set, offset it according to its supposed position.

But the position of sub2 is the original position, and its position will not change because demo1 adds the position attribute.

If the position of demo2 is also set to relative at this time, it will still be the same as sub1, offset according to its original position.

Note that relative’s offset is based on the upper left side of the object’s margin (upper left vertex).

2. absolute

This attribute is misleading. It is said that when the position attribute is set to absolute, it is always positioned according to the browser window. This is actually wrong. In fact, this is a characteristic of fixed properties.

When the position of demo1 is set to absolute:

(1) When the parent object of demo1 (or great-grandfather, as long as it is a parent object) also sets the position attribute, and the attribute value of position is absolute or relative, also That is to say, if it is not the default value, sub1 will be positioned according to this parent element.

If the parent sets attributes such as margin, border, padding, etc., then this positioning point will ignore the padding and will be positioned from where padding starts (i.e. only starting from the upper left corner of the padding) , which is consistent with our It is natural to think that positioning starts from the upper left end of the margin, but the idea is different.

The next question is, where is the location of sub2? Because when position is set to absolute, it will cause sub1 to overflow the normal document flow, as if it does not belong to the parent, it floats up. It is called a "layer" in DreamWeaver, but it actually means the same thing. At this time, sub2 will obtain the position of sub1, and its document flow is no longer based on sub1, but starts directly from parent.

(2) If demo1 does not have a parent object with a position attribute, then the body will be used as the positioning object and positioned according to the browser window. This is easier to understand.

3. fixed

fixed always uses the body as the positioning object and is positioned according to the browser window.

4. static

The default value of position. Generally, when the position attribute is not set, it will be arranged according to the normal document flow.