When using CSS to set the position of DIV, we may often get confused
with the 4 position properties : static, relative, absolute and fixed.
If we don't understand them correctly, we may often get unexpected
result. Here we make some analysis to them.
The definitions of these 4 properties:
- static : The default position property. It has no position actually. The element will appear where it should be (top, bottom, left, right or z-index has no use here)
- relative : This one will position relative its normal position. We can use top, bottom, left and right to position relative to its normal position.
- absolute : It will position relative to its first positioned ancestor element.
- fixed : It is positioned relative to the browser window. We can apply top, bottom, left, right and z-index on it.
static and fixed can be understood easily. Here we focus on relative and absolute.
1. relative, element with position set to relative will leave its normal position in the page, but it will be still in the page.
The
layer with yellow background has a position set to relative. The red
border is the normal position it should be. After change position with
top and left, the gray background is still existing, it means the normal
position is still there.
2. absolute : element with position
set to absolute will be still in the normal page, but the space in the
normal page will not exist anymore.
From the above picture, the yellow layer is set to absolute, the gray layer will take up the space of the yellow layer.
3. Main difference between relative and absolute
The first difference is mentioned in 1 and 2.
The second is for relative the element will always be positioned relative to its nearest parent element, no matter the parent element is static or not.
In the above picture, the red layer is positioned
relative, its parent which is the green layer has a static position. red
layer has top and left set to 20px. If the red layer is positioned
absolute, then we will have the following picture.
From the above picture, the red layer still has top and left set to 20px. But it is positioned relative to the yellow parent layer which has position property set to absolute or relative, the parent layer may not be the direct parent. If there is no parent element which has position set to relative or absolute. Then the absolute element will be positioned relative to body element. See below
In addition to top, left, bottom, right, margin also has the same rules above.
Source : http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/
