CSS position detailed

Many of the other properties of CSS are easy to understand, such as fonts, text, backgrounds, and so on. Some CSS books will also be on these simple attributes of the introduction of a very small, but just ignore some difficult properties to explain, there is a suspicion of cop. The main hard-to-understand properties of CSS include box-type structures and positioning. As positioniseverything, this article will mainly tell about position understanding, and strive to let you read this article after the position have the most comprehensive understanding.

Four attribute values for position:

1. Relative

2. Absolute

3. Fixed

4. Static

These four properties are described below.

<p id= "Parent" >
<p id= "Sub1" >sub1</p>
<p id= "Sub2" >sub2</p>
</p>

1. Relative

The relative property is relatively simple, and we want to figure out which object it is offset from. The answer is its own location. In the above code, SUB1 and Sub2 are sibling relationships, if you set sub1 a relative attribute, such as the following CSS code:

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

We can understand that if you do not set the relative property, the location of sub1 should be in a position according to the normal document flow. However, when the position of sub1 is set to relative, the "relative" meaning of relative will be offset according to the value of the top,right,bottom,left as it should be.

For this, you just need to keep in mind that sub1 is where it should be if you don't set relative, and once set, it should be offset where it should be.

The question then is, where is the location of the SUB2? The answer is where it was, and where it is now, and its position will not change because Sub1 adds position properties.

What happens if the SUB2 position is also set to relative at this point? This is still the same as sub1, offset by the position it was originally supposed to be.

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

2. Absolute

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

When Sub1 's position is set to absolute, who is the object to offset it? There are two cases here:

(1) When the parent of sub1 (or great-grandfather, as long as the parent object) has the Position property set, and the Position property value is absolute or relative, that is, is not the default, SUB1 is positioned according to the parent in this case.

Note that although the object is OK, there are some details that you need to be aware of, and that is, which one of the parent's anchor points are we targeting? If the parent sets a property such as Margin,border,padding, the anchor will ignore the padding, and the location starts at padding (that is, only from the upper-left corner of the padding). This is different from the idea that we would take it for granted that we would start positioning at the top left of margin.

The next question is, where is the location of SUB2? Because when position is set to absolute, it causes sub1 to overflow the normal flow of the document, as it does not belong to the parent, it floats, and in Dreamweaver it is called the "layer", which in fact means the same thing. At this point Sub2 will get the position of SUB1, its document flow is no longer based on SUB1, but directly from the parent.

(2) If SUB1 does not have a parent object with a position attribute, then it is easier to understand that it will be positioned as a body object and in the browser's window.

3. Fixed

Fixed is a special absolute, that is, fixed always in the body as the target object, according to the browser's window to locate.

4. Static

Position default values, typically not set with the Position property, are arranged according to normal document flow.

If this article has any technical or express questions, please leave a message. Thank you for reading!