Detailed explanation of the usage of position attribute in HTML (four types)

The four property values ​​of position are:

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

These four attributes are described below.

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

1. relative

The relative property is relatively simple. We need to figure out which object it is offset relative to. The answer is its location itself. In the above code, sub1 and sub2 are siblings. If you set a relative attribute for sub1, for example, set the following CSS code:

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

We can understand it this way: if the relative attribute is not set, the position of sub1 should be at a certain position according to the normal document flow. But when the position of sub1 is set to relative, it will be offset according to the values ​​of top, right, bottom, and left according to where it should be. The "relative" meaning of relative is reflected here.

For this, you just need to remember where sub1 should be if relative is not set, and once it is set, offset it according to where it should be.

The next question is, where is the location of sub2? The answer is that it is where it was originally, and its position will not change because sub1 has added the position attribute.

What will happen if the position of sub2 is also set to relative? At this time, it is still the same as sub1, and it is offset according to its original position.

Note that the relative offset is based on the top left side of the object's margin.

2. absolute

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

When the position of sub1 is set to absolute, who is the object for offset? There are two situations here:

(1) When the parent object (or great-grandfather, as long as it is a parent object) of sub1 also sets the position attribute, and the position attribute value is absolute or relative, that is, it is not the default value, then sub1 is positioned according to this parent.

Note that although the object has been determined, there are some details that require your attention, that is, which anchor point of the parent should we use for positioning? If parent sets properties such as margin, border, padding, etc., then this anchor point will ignore padding and will be positioned from the beginning of padding (that is, only from the upper left corner of padding), that is, padding will be ignored, but margin and border will not be ignored.

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

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

3. fixed

fixed is a special absolute, that is, fixed always takes body as the positioning object and is positioned according to the browser window. Even if you drag the scroll bar, its position will not change. Similar to background-attachment:fixed

Of course, there seems to be no support under Dreamweaver

4. static

The default value of position, when the position attribute is not set, is to arrange the elements according to the normal document flow.

Summarize

The above is the usage of position in HTML introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!