HTML and CSS

Relative Positioning

As mentioned, the terminology used in CSS positioning is a bit vague. Relative positioning is often confusing at first because it begs the question: Relative to what? Most people automaticallyand quite logicallythink that the position would be relative to another element.

But it's not (you knew that was coming). Relatively positioned boxes are positioned to the normal flow. This means that they are not removed from the normal flow the way an absolutely positioned box is. Here, I've removed all margins using the universal selector (*); this is to get rid of all default whitespace so you can see exactly how the relative positioning is being measured (see Example 12-5).

Example 12-5. Relative positioning
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
* {margin: 0;}
#content {
           position: relative;
           left: 45px;
           top: 10px;
           width: 400px;
           border: 1px solid red;
           }
</style>
</head>

<body>
<h1>The Black Cat</h1>
<p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a> in my
 wife a disposition not uncongenial with my own. Observing my partiality for domestic pets,
 she lost no opportunity of procuring those of the most agreeable kind. We had birds, gold
 fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<div id="content">
<p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large and
 beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of
 his intelligence, my wife, who at heart was not a little tinctured with superstition, made
 frequent allusion to the ancient popular notion, which regarded all black cats as witches
 in disguise. Not that she was ever serious upon this point - and I mention the matter at
 all for no better reason than that it happens, just now, to be remembered.</p>
</div>
<p>Pluto - this was the cat's name - was my <a href="http://www.poemuseum.org/">favorite<
/a> pet and playmate. I alone fed him, and he attended me wherever I went about the house.
 It was even with difficulty that I could prevent him from following me through the streets
.</p>
</body>
</html>

Figure 12-8 shows how the content div is now positioned relative to the normal flow of the document, not any other boxes.

Figure 12-8. A relative positioned boxnote that the offsets relate to the normal flow, not any other element.

So, the box is offset 10 pixels from the earlier element box and 45 pixels to the left of the flowexactly the same place where the text begins because it's in the normal flow, too. You see that the flow is uninterrupted by the positioning; the ensuing content flows as it should both before and after the relatively positioned box.

NOTE

Relative positioning is used when the normal flow shouldn't be broken. Absolute positioning is best used for items that have to be positioned very specifically. Often the two are combined, such as having a relatively positioned div with an absolutely positioned div contained within it, or vice versa. You'll see more of this in action in tutorial 13, "CSS Layouts."