Position usage in CSS

Four attribute values for position:

1.relative

2.absolute

3.fixed

4.static

These four properties are described below.

</pre><pre name= "code" class= "HTML" ><div id= "parent" >       <div id= "Sub1" >sub1</id>       <div id= "sub2" >sub2</id>  </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, 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, which is positioned from the point where the padding starts (that is, only from the upper-left corner of the padding), that is, ignoring padding, Of course, margin and border are not overlooked.

The next question is, where is Sub2 's position? 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, even if you drag the scroll bar, his position will not change. Similar to Background-attachment:fixed

Of course there seems to be no support under Dreamweaver

4. Static

The default value of position, which is typically not set when the Position property is configured, is arranged according to normal document flow.

The above is the CSS in the position usage content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

