Absolute position is a very convenient way to align and postion elements within a div section, such as navigation tabs in a header, etc. However, one must remember to specify the containing block’s position property to make it really work.
For example, this is the code for my navigation menus inside a header div, my intention was to put nav tabs at the bottom right of the header box:
<div id="header">
<ul id="nav-tabs">
<li><a href="/">Home</a></li>
<li><a href="/">Page1</a></li>
<li><a href="/">Page2</a></li>
</ul>
</div>
And now my css looks like this:
div#header {
margin: 0 auto
width: 900px;
height: 120px;
background: url(/images/header-background.gif) repeat-x;
}
ul#nav-tabs {
position: absolute;
bottom: 2px; right: 0px;
height: 41px;
}
Notice I used “position: absolute” for the nav tabs <ul> tag, but it didn’t work, for it showed up at the bottom right of the whole screen, not within just the header.
The fix is to add “position: relative” to the div#header style, then it all works just as expected.
Hope that helps if you have the same problem with absolute positioning.
