What are the uses of position in html? Introduction to the usage of position

What this article brings to you is what are the uses of position in html? The introduction to the usage of position has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The four attribute values ​​​​of position:

1.relative
2.absolute
3.fixed
4.static
The four attributes are described below. .

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

1. The relative relative attribute is relatively simple. We need to figure out which object it is offset relative to. The answer lies in its location. In the above code, sub1 and sub2 are in a sibling relationship. 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, sub1 According to the normal document flow, it should be in a certain position. 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 the scroll bar is dragged, its position is It won't change. Similar to background-attachment:fixed
Of course, it does not seem to be supported under Dreamweaver

4. The default value of static

position. Generally, when the position attribute is not set, the normal document flow will be followed. Arrange.

The above is the detailed content of What are the uses of position in html? Introduction to the usage of position. For more information, please follow other related articles on the PHP Chinese website!