Positioning
Positioning will work in all '4th generation' browsers (except iCab 2-) using two types of positioning; absolute and relative. Relative positions an element relative to the position it would naturally be in. The space will be left for it. If it is correctly displaced, it can float on top of other elements. Absolutely positioned elements are positioned relative to the top left corner of the document. No space will be left where they normally would be. They will float over other elements.
Positioned elements should be given a combination of top, left, bottom, right, width and / or height properties to allow the browser to work out where to put the element. For the best reliability in old browsers, it is best to position only DIV elements. Newer browsers can position most elements.
Positioning is very useful, especially in DHTML. Absolutely positioned elements inside relatively positioned elements are positioned relative to the relatively positioned element. Got that? This means that they can be inserted into the document like a normal block element (like a paragraph) but can accept styles normally given to absolutely positioned elements.
As an example of the ability of CSS positioning (CSS-p), how about designing page layout without using tables:
div.sideLink {
/* side link container */
position: absolute;
Warning: Undefined variable $sw in /var/www/vhosts/tarquin-howto/webroot/tutorials/csstut/position.inc.php on line 18
left: 30px;
top: 50px;
width: 140px;
}
div.sideLink div {
/* borders and padding for
the div inside the side
link container */
padding: 10px;
border: 2px solid #000077;
}
div.mainPart {
/* main container */
position: absolute;
Warning: Undefined variable $sw in /var/www/vhosts/tarquin-howto/webroot/tutorials/csstut/position.inc.php on line 32
left: 200px;
top: 20px;
Warning: Undefined variable $sw in /var/www/vhosts/tarquin-howto/webroot/tutorials/csstut/position.inc.php on line 34
right: 30px;
}
div.mainPart div {
/* borders and padding for
the div inside the main
container */
padding: 10px;
border: 2px solid #007700;
}
div.sideLink div a {
/* links in the side link
conatiner */
width: 100%;
display: block;
background-color: #bbbbff;
margin-bottom: 2px;
}
div.sideLink div a:hover {
/* hover effect for the
links in the side link
conatiner */
background-color: #bbffff;
}Div elements of class sideLink will be 30 pixels from the left and 50 pixels from the top of the window. They will be 140 pixels wide. Links within those div elements will be the full width of the element (if the browser supports that). Div elements of class mainPart will be positioned 200 pixels from the right and 20 pixels from the top of the window, and will be sized wide enough to be 30 pixels from the right side of the screen. This will position these elements to the right of the div elements of class sideLink.
Some browsers will position the elements taking their borders and padding into account, and others will not, so the page looks different in different in different browsers. It may be a better idea to put the positioning onto one div, then put another div inside it, to which you assign borders and padding, and make the width 100% of its parent element's width. I have done this here. Both classes of div element will have a 2 pixel thick border, and will leave 10 pixels between the border and the contents.
Try it here: see these positioning styles in action.
Last modified: 4 September 2008