CSS: Positioning within a container

The position property is used to determine what kind of positioning you want to use for the container. The most useful values are:

position: absolute;
Positions an element at an arbitrary location in the page

position: relative;
Positions an element relative to its usual position in the page

Now, you can position an object absolutely anywhere you want in the document. It's also possible to position objects within a container. This CSS rule would be applied to:

#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="navigation">...</div></div>

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

#navigation
{
position: absolute;
left: 20px;
top: 10px
}

Alternatively, you could of course also use margin: 10px 0 0 20px, but there are some cases where it's preferable to use positioning.