Position understanding of CSS

Four attribute values for position:

1. Relative
2. Absolute
3. Fixed
4. Static

<div id= "Demo" >
<div id= "Demo1" >demo1</div>
<div id= "Demo1" >demo2</div>
</div>

1. Relative

The relative property is offset relative to its own position. If you set demo1 a relative attribute, such as the following CSS code:

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

I understand that if you do not set the relative property, the location of demo1 according to normal document flow, it should be in a certain location. However, when the position of Demo1 is set to relative, the "relative" meaning of relative will be offset according to the value of the top,right,bottom,left as it should be.

Just keep in mind that Demo1 is where it should be if you don't set the relative, and once it's set, it's offset by where it should be.

However, the position of the SUB2 is the original position, and its position does not change because DEMO1 increases the position property.

If the Demo2 position is also set to relative at this point, it will still be the same as sub1, and it should be offset in its original position.

Note that the offset of the relative is based on the upper-left edge of the object's margin (top left vertex).

2. Absolute

This attribute is misleading. It is actually wrong to say that when the position property is set to absolute, it is always positioned according to the browser window. In fact, this is the feature of the fixed attribute.

When the position of DEMO1 is set to absolute, the following:

(1) When the parent object of Demo1 (or great grandfather, as long as the parent object) also sets the Position property, and the Position property value is absolute or relative, that is, if it is not the default, then SUB1 is positioned according to the parent element.

If the parent sets a property such as Margin,border,padding, the anchor will ignore the padding, and the location starts at padding (that is, only from the upper-left corner of the padding) . This is different from the idea that we would take it for granted that we would start positioning at the top left of margin.

The next question is, where is Sub2 's position? Because when position is set to absolute, it causes sub1 to overflow the normal flow of the document, as it does not belong to the parent, it floats, and in Dreamweaver it is called the "layer", which in fact means the same thing. At this point Sub2 will get the position of SUB1, its document flow is no longer based on SUB1, but directly from the parent.

(2) If Demo1 does not have a parent object with a position attribute, then it is easier to understand that it will be positioned as a body object and in the browser's window.

3. Fixed

The fixed object is always anchored to the body and is positioned according to the browser's window.

4. Static

The default value of position, which is typically not set when the Position property is configured, is arranged according to normal document flow.

Position understanding of CSS