[Go] Summarize the positioning Position property in CSS

CSS Position Property values:

• Absolute: Generates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
• Relative: Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.
• Fixed: Generates an absolutely positioned element that is positioned relative to the browser window.
• Static: The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations). The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
• Inherit: Specifies that the value of the position property should be inherited from the parent element.

Our most commonly used is absolute and relative two ways, so the main discussion of the difference between the two.

Relative relative positioning

Relative positioning we mainly want to know the relative to whom to offset? In fact, relative positioning is relative to the elements of their own location, we look at the example:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
This is a nested div, a parent div parent, containing two sub-div Sub1 and SUB2, because the two sub-Div does not have any position properties set, they are in their place. Default locations such as:
When we change the style of Div Sub1:
#sub1 {    width:100px;    height:100px;    Background-color:blue;    position:relative;    top:15px;    left:15px;}
The results are as follows: We will find that the SUB1 is offset, does not affect the position of the Sub2, while covering up the SUB2, remember that the offset is not relative to the DIV parent, but relative to the original location of Sub1.
What happens if we set a relative position for Sub1 's sibling div Sub2? Let's take a look.
#sub2 {   width:100px;   height:100px;   background-color:red;    position:relative;   top:10px;   left:10px;                  }
Results such as:
The SUB2 is also offset from the original position and covers the SUB1 without affecting the location of the Sub1. Relative positioning is easier to understand, so let's take a look at the absolute positioning absolute.
Absolute absolute Positioning
Absolute positioning in the use of the more error-prone, there are several points to note, the above code to restore, we add an absolute positioning for the Sub1.
#sub1 {    width:100px;    height:100px;    Background-color:blue;    Position:absolute;    top:15px;    left:15px;}
The results are as follows:
We found that because of the absolute positioning of the Sub1, the position of the Sub1 shifted, while the sibling Div Sub2, which occupied the Sub1 position, and Sub1 obscured Sub2.
Below, the SUB2 also adds absolute positioning:
#sub2 {     width:100px;     height:100px;     background-color:red;         Position:absolute;     top:10px;     left:10px;              }
The results are as follows:
We will find that the SUB2 is also displaced and covers the SUB1.
At this point, we will find the problem, two sub-div set absolute positioning, they are relative to which element has been offset?
There are two situations:
1. If the Sub1 parent element or grandparent element is set with the position attribute and the property value is absolute or relative, then the child element is positioned relative to the parent element. For example, the outermost div parent in our example sets the relative positioning property, so the Sub1 and Sub2 two Div are positioned according to the Div parent. But according to the parent's location point? The answer is: 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 padding).
2, if Sub1 does not exist a parent object with the position attribute, then it will be positioned as body object, according to the browser window.
We will delete the position property of the parent in the example and look at the result:
Since the two sub-Div does not find the parent element with the position attribute, the body is used to locate it, so please do not mistakenly assume that it is relative to the parent because of the picture.
Fixed positioning method
Fixed is a special absolute,fixed always with body as the target object, according to the browser's window to locate. We restored the code to its original state, SUB1 increased the absolute positioning method, and SUB2 increased the fixed positioning mode:
#sub1 {   width:100px;   height:100px;   Background-color:blue;   Position:absolute;   top:15px;   left:15px;} #sub2 {   width:100px;   height:100px;   background-color:red;       position:fixed;   top:5px;   left:5px;              }
The results are as follows:
It is found that SUB2 is always positioned as body, and Sub1 is positioned offset according to the parent element because it discovers that the parent has a position attribute relative.
Note Fixed in IE low version Chinese does not support, including IE6
As for the static and inherit two kinds of positioning, rarely used in the project, static is the default value of the Position property, generally does not set the Position property, will be arranged according to normal document flow. This is not a repeat.
[Go] Summarize the positioning Position property in CSS