Absolute positioning within a container using CSS

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. This is also possible (and often desirable) to position objects within a container at absolute location. This thing is very simple to do too using CSS. Simply assign the following CSS rule to the container:


#container
{
position: relative
}


Now any element within this container will be positioned relative to it. Say you had this HTML structure:

<div id="container"><div id="placement">...</div></div>

To position the navigation exactly 15px from the left and 2px from the top of the container box, you could use these CSS commands:


#placement
{
position: absolute;
left: 15px;
top: 2px
}


Perfect! In this particular example, you could of course also use margin: 15px 0 0 20px, but there are some cases where it is preferable to use positioning.