CSS Position Property
November 14th, 2007, 10:56 pm
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.
By Miroslav Stancic on March 21st, 2009 at 10:55 am
Thanks, great, save me of pain in a..