Position of CSS, cssposition

Position of CSS, cssposition

Four property values of position:

<Div id = "demo">
<Div id = "demo1"> demo1 </div>
<Div id = "demo1"> demo2 </div>
</Div>

1. relative

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

# Demo1
{
Position: relative;
Padding: 5px;
Top: 5px;
Left: 5px;
}

In my understanding, if the relative attribute is not set, demo1 should be in a certain position according to the normal document stream. However, when the position of demo1 is set to relative, the value of top, right, bottom, and left is offset according to the location where it is supposed to be located, the relative meaning of relative is also embodied in this.

You just need to remember where demo1 should be when relative is not set. Once it is set, it will be offset according to the location where it should be.

However, the position of sub2 is the original position, and its position will not be changed because demo1 adds the position attribute.

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

Note:The relative offset is based on the upper left side (upper left vertex) of the object's margin ).

2. absolute

This property is misleading. When the position attribute is set to absolute, it is always located according to the browser window, which is actually incorrect. In fact, this is a feature of the fixed attribute.

After the position of demo1 is set to absolute ,:

(1) When the demo1 parent object (or great-grandfather, as long as it is a parent object) also sets the position attribute and the position attribute value is absolute or relative, that is, this is not the default value. In this case, sub1 locates the parent element.

If parent sets attributes such as margin, border, and padding, the position will ignore the padding andPaddingStarting position (starting from the upper left corner of padding)This is different from the idea that we would assume that we would start positioning at the upper left of margin.

The next question is, where does sub2 go? When the position is set to absolute, sub1 overflows the normal Document Stream, just as it does not belong to the parent. It floats and is called a "layer" in DreamWeaver ", it actually means the same. In this case, sub2 obtains the sub1 position, and its Document Stream is not based on sub1, but directly starts from the parent.

(2) If demo1 does not have a parent object with the position attribute, it will take the body as the positioning object and locate it according to the browser window, which is easier to understand.

3. fixed

Fixed always uses the body as the positioning object and locates according to the browser window.

4. static

The default value of position. When the position attribute is not set, it is arranged according to the normal document stream.