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

This article mainly introduces the usage of position in HTML. The article introduces the four attribute values ​​​​of position one by one. Interested friends can follow the editor to take a look.

The four attribute values ​​​​of position ：

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

These four attributes are described below.

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

1. relative

The relative attribute is relatively simple. We need to figure out which object it is offset from. The answer lies in its location. In the above code, sub1 and sub2 are in a sibling relationship. If you set a relative attribute of 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 is as follows Normal document flow, it should be somewhere. But when the position of sub1 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.

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

The next question is, where is the position of sub2? The answer is where it was before and where it is now. Its position will not change because sub1 adds the position attribute.

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

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

2. absolute

Some people always mislead this attribute. 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 sub1 is set to absolute, who is it used as the object to offset? There are two situations here:

(1) When the parent object of sub1 (or great-grandfather, as long as it is a parent object) parent 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.

Note that although the object has been determined, there are some details that require your attention, that is, which positioning point of the parent should we use to position it? If the parent sets attributes such as margin, border, padding, etc., then this positioning point will ignore the padding and will be positioned from the beginning of the padding (that is, only starting from the upper left corner of the padding), that is, ignoring the padding, of course it will not Ignore margin and border.

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 sub1 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 is a special absolute, that is, fixed always takes the body as the positioning object, and is positioned according to the browser window, even if it is dragged and scrolled However, his position will not change. Similar to background-attachment:fixed

Of course, it does not seem to be supported under Dreamweaver

4. The default value of static

position is generally not set. Attributes will be arranged according to the normal document flow.

Summary

The above is the usage of position in html introduced by the editor. I hope it will be helpful to everyone!

The above is the detailed content of Detailed explanation of the usage of position attribute in HTML (four types). For more information, please follow other related articles on the PHP Chinese website!