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

The four attribute values ​​​​of position:

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>

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 that 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 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 you don't set relative, and offset it from where it should be once it is set.

The subsequent 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.

This property is always misleading. 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 sub1's parent object (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, that is, it is not the default value, then sub1 follows This parent is used for positioning.

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 the 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.

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

Of course there seems to be no support under Dreamweaver

The default value of position. Generally, when the position attribute is not set, it will be arranged according to the normal document flow.

The above is the usage of position in HTML introduced by the editor. I hope it will be helpful to you. 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 your support of the VeVb martial arts website!