TalkPHP - View Single Post

wGEric · 11-15-2007, 06:04 AM

This use to confuse me in the past and I thought this would be a good blog topic so I wrote a blog on it, http://www.ericfaerber.com/2007/11/1...tion-property/

Quote:

Some people have a hard time figuring out the position property in CSS. It took me a while to fully understand it and use it to it’s full potential. Here is some information on it and hopefully you can understand it.

position: relative; positions the element relative to it’s nromal position. An elements normal position is its position in the flow of the page. So top: 5px and left: 30px; will move it down 5 pixels and left 30 pixels from it’s normal position on the page.

position: absolute; moves it to a certain spot within the first parent element that has been positioned before it. This is where it gets tricky. This defaults to the browser window if you haven’t positioned any parent elements. Examples will make this easier for me to explain.

<h1>Positioning Example</h1>
<div style="width: 500px; height: 500px; border: 1px #000000 solid;">parent element
<div style="position: absolute; bottom: 0px; left: 0px">child element</div>
</div>
View Example

In this example, child element will be in the bottom left corner of the browser window although the parent element doesn’t go below 500 pixels or the window is shorter than 500 pixels. The child element will be in the bottom left corner of the browser window even if you can scroll below the page.

<h1>Positioning Example</h1>
<div style="width: 500px; height: 500px; border: 1px #000000 solid; position: relative;">parent element
<div style="position: absolute; bottom: 0px; left: 0px">child element</div>
</div>
View Example

In this example, child element will be in the bottom left corner of the parent element. This is because parent element has now been positioned so it becomes the containing block and position: absolute will move elements around within that block.