Today's Question:  What does your personal desk look like?        GIVE A SHOUT

CSS DIV position analysis

  Peter        2013-01-29 03:23:57       10,546        0    

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/

CSS  DIV  POSITION  RELATIVE  ABSOLUTE 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.