CSS position detailed

Original link: http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

Position set to Relative:divsan anchor is the upper-left corner of the Divfather content area, which is the padding inner boundary of the divfather, rather than the upper-left corner of divfather padding.

Position is set to absolute in two situations:

1, the Divsan Divfather set the position

The Divsan anchor point is the upper-left corner of the padding area of the divfather, which is the padding outer boundary of the divfather, rather than the inner boundary of divfather padding.

2, Divsan divfather not set position

Divsan's anchor point is body

When relative is positioned, the focus is based on the upper-left side of the margin, while absolute is positioned according to the upper-left corner of the padding of the parent object for which it was recently positioned.

When using absoulte or fixed positioning, you must specify at least one of the left, right, top, and bottom properties, or the Left/right/top/bottom property will use their default auto. This causes the object to conform to the normal HTML layout rules, which are presented immediately after the previous object, simply to become relative and occupy the document space.

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 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 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 window to locate.

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.


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

(turn) CSS position detailed