Tutorial 18: CSS Positioning, Part I
A positioning primer
When a document is formatted using Cascading Style Sheets, it contains a number of boxes, as we have seen previously. Normally, these boxes are laid out one after the other, observing the rules we discussed in Tutorials 9 and 10 (or, as is the case with most browsers on the market today, not observing any rules at all). However, with CSS, you also have the option of taking boxes out of the normal flow and using different ways of positioning them.
One way to do this is to use floating boxes. We will discuss these in a future tutorial. Another way is to use absolute positioning.
Absolute Positioning
In its simplest use, absolute positioning means that an element's box is removed from the normal flow and placed somewhere in the page, as specified by a handful of properties. An absolutely positioned box says goodbye to all the other boxes and just goes and sits somewhere on its own, not bothering them at all. For example, look at the following style directives:
DIV#abs { position: absolute; top: 1em; left: 20%; width: 60%; }
With the ruleset above, the position property for the DIV element with ID abs is set to absolute. Its default value is static, which means that the element's box is part of the normal flow. When set to absolute, in the simplest case, it means that the element is placed in an arbitrary position somewhere in the viewport. This position is set by the properties top, bottom, left and right, which tell the user agent to put the box at a certain distance from one of the viewport's edges.
In our example, the box is placed 1em down from the top edge of the viewport, and 20% (of the width of the viewport) to the right of the left edge. The width property is also used to set the width of the box in our example.
An absolutely positioned box, 1em from the top, 20% from the left, and 60% wide
There is a catch, however; if this box was a child of another box that was not positioned statically, then instead of being positioned relative to the viewport, it will be positioned relative to that parent's box. Confused? You should be. Here's a nifty little diagram to make it all make sense.
#one { position: absolute; top: 1em; left: 1em; } #two { position: absolute; top: 3em; left: 2em; } #three { position: absolute; top: 0.5em; left: 0.5em; }
<P ID="one">This is box one.</P> <DIV ID="two"> <P>This is box two.</P> <P ID="three">This is box three, which is also inside box two.</P> </DIV>
Let's assume that everything else in this document is statically positioned. Then, the three boxes would be laid out as shown in the following image.
Box one is absolutely positioned relative to the viewport. Box two is also absolutely positioned relative to the viewport. Box three, however, is a child of box two, so it is absolutely positioned relative to box two.
