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:

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:

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.


Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L