Detailed explanation of CSS Position

Many other properties of CSS are mostly easy to understand, such as fonts, text, background, etc. Some CSS books will also introduce these simple properties with great fanfare, but neglect to explain some difficult properties, which is suspected of avoiding the important and taking the easy. The main properties in CSS that are difficult to understand include box structure and positioning. Just like position is everything, this article will mainly talk about the understanding of position, and strive to give you the most comprehensive understanding of position after reading this article. The four attribute values ​​of

position:

1. relative

2. ##absolute

3. fixed

##static
The following describes these four properties respectively.

<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 will follow 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). This is different from what we would take for granted. The idea of ​​positioning the upper left end of the margin is different.

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 Like parent, it floats up. It is called a "layer" in DreamWeaver, but it 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 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.

4. static

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

If there are any technical or expression problems with this article, please leave a message. Thank you for reading!

For more detailed explanations of CSS Position, please pay attention to the PHP Chinese website for related articles!