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/

Save as PDF Mark as read Mark as important

By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags:CSS, DIV,position,relative,absolute   Read(957) Comment(0)

               

 Previous : Why does Symbian collapse?
 Next : Turn browser into notepad with one line of code

•  Ways to make elements in HTML center aligned horizontally
•  Responsive Web Design
•  CSS Box Shadow Illustration
•  Magic CSS shape
•  Venn Diagram entirely in CSS
•  Making Computer Science a Requirement?
•  Speech balloon with pure CSS--One step further
•  CSS Overflow Property Utilization
•  Put Your HTML in a Box
•  Set Theory in C++11

No comment for this article.