DemiLane » CSS http://demilane.com Pages of Rogelio Calamaya Sun, 05 Feb 2012 01:43:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Absolute and Relative Positioning http://demilane.com/absolute-and-relative-positioning/ http://demilane.com/absolute-and-relative-positioning/#comments Thu, 04 Dec 2008 01:36:36 +0000 Rogelio http://blog.demilane.com/?p=67 With the Absolute position you can position the page element anywhere in the parent element. You can control them the way you want. And much more control if the parent element is relatively positioned.

Let’s just assume that the box with dashed border is your browser window. This is what is looks like if the position on the parent element is set to default:

Image 1

And this, if the position on parent element is set to relative:

Image 2

The explanation to the images above is that when the element is set to absolute position, it position itself with respect to the parent element(Image 2). But when the parent element is not relatively position, it position itself to the body element ignoring the parent element(Image 1).

So what happens when the #child_element_1 is set to default position(static) and the sibling is set to absolute position? See the image below:

Image 3

As you can see in the image above, while the #child_element_1‘s height is increasing the #parent_element‘s height will increase too but not with the #child_element_2‘s height. It’s because when the element is set to absolute position, that element is remove from the normal flow.

Hope this will help. Cheers!

Related posts:

  1. Toggle Grid in Blueprint CSS

]]> http://demilane.com/absolute-and-relative-positioning/feed/ 2