CSS position detailed

You can use the Google browser to the NetEase site as an example, through the top of the site navigation menu bar to see the difference between relative and Aboulute

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.

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

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 certain location 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 up relative, and once it's set, it's offset by where it should be.

and then the question is, where is Sub2 's position? 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 time? 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 margin of the object.

2. Absolute

This attribute has always been 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, whose object does it shift? There are two types of situations:

(1) when Sub1 's parent (or great-grandfather, as long as it is a parent object), parent also sets the Position property, and the Position property value is absolute or relative or fixed, that is, the case is not the default value, At this point sub1 is positioned according to the parent.

Note that although the object is OK, there are some details that need your attention, that is, which one of the parent's anchor points to locate it? 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.

(2) if Sub1 does not exist a position The parent object of the property, then it will be positioned as body object, which is easier to understand.

3. Fixed

4. Static

position default value, Typically, when you do not set the Position property, the

is arranged according to the normal document flow.

Position of CSS