[Reprint] explanation of CSS position

Many other attributes of CSS are easy to understand, such as fonts, texts, and backgrounds. Some CSS books will also introduce these simple attributes in a great way, but ignore the explanation of some difficult attributes, which may be avoided. Attributes that are hard to understand in CSS include the box structure and positioning. Just like positioniseverything, This article focuses on the understanding of position, and strives to give you the most comprehensive understanding of position after reading this article.

Four property values of position:

1. Relative
2. Absolute
3. Fixed
4. Static

The following describes the four attributes.

 <  Div  ID  = "Parent"  >       <  Div  ID  = "Sub1"  > Sub1</  Div  >       <  Div  ID  = "Sub2"  > Sub2 </  Div  >  </  Div  > 

1. Relative

Relative attributes are relatively simple. We need to find out which object it is relative to for offset. The answer is its location. AboveCodeSub1 and sub2 are in the same level. 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 that if the relative attribute is not set, sub1 should be in a certain position according to the normal document stream. However, when the position of sub1 is set to relativeSupposed to beAnd relative's "relative" meaning is also reflected here.

In this case, you only need to remember where sub1 should be when relative is not set. Once it is set, it will be offset according to its proper position.

Then the question is, where is sub2? The answer is where it was originally and where it is now. Its position will not be changed because sub1 adds the position attribute.

If we set the position of sub2 to relative at this time, what will happen? At this time, it is still the same as sub1 and offset according to its original location.

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

2. Absolute

This attribute is always misleading. When the position attribute is set to absolute, it is always located according to the browser window, which is actually incorrect. In fact, this is a feature of the fixed attribute.

After sub1's position is set to absolute, who is the object offset? There are two scenarios:

(1) when the parent object (or great-grandfather, as long as it is a parent object) of sub1 also sets the position attribute and the attribute value of position is absolute or relative, that is to say, this is not the default value. In this case, sub1 locates based on this parent.

Note: although the object is fixed, you need to pay attention to some details, that is, which positioning point of the parent is used to locate the object? If parent sets attributes such as margin, border, and padding, the position will ignore the padding and will start from the position of the padding (that is, starting from the upper left corner of the padding, this is different from the idea that we would assume that we would start positioning at the upper left of margin.

The next question is, where does sub2 go? When the position is set to absolute, sub1 overflows the normal Document Stream, just as it does not belong to the parent. It floats and is called a "layer" in Dreamweaver ", it actually means the same. In this case, sub2 obtains the sub1 position, and its Document Stream is not based on sub1, but directly starts from the parent.

(2) If sub1 does not have a parent object with the position attribute, it will take the body as the positioning object and locate it according to the browser window, which is easier to understand.

3. Fixed

Fixed is a special absolute, that is, fixed always uses the body as the positioning object and locates according to the browser window.

4. Static

The default value of position. When the position attribute is not set, it is arranged according to the normal document stream.

 

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