This chapter is from the book

Having conquered the
menaces of floats and clearing
in the last chapter, we will
now turn our attention to the
second advanced layout-related
topic you should be familiarising
yourself with: positioning.
This feature of CSS allows
you to take elements out of
the normal document flow (i.e.,
where they are placed by default
before any CSS is applied to
them) and shift them left,
right, up and down, putting
them somewhere else entirely.
This is useful for a variety
of layout purposes, such as
multiple column layouts, putting
captions on photographs, keeping
a feature such as a menu or
heading in the same position
on the screen regardless of
how much the browser is scrolled,
and more.

In this chapter, we will look at practical examples of such techniques while exploring positioning.

In this chapter you
have the opportunity to try
it yourself with the convenient
sample code downloads found
on the book’s companion
website—http://interactwithwebstandards.com.

Positioning basics

There are four types of positioning:

static: The default if no positioning is applied—this simply lays out the element as normal, in the document flow. We therefore don’t need to discuss this one much further. You’d use this value to override positioning that has been set earlier in your style sheet.

relative: This places the element where it would normally sit in the document flow, but then positions it somewhere else—relative to its normal position—depending on the movement values you give it.

absolute: This takes the element completely out of the document flow (so elements above and below it will appear next to one another as if the positioned element didn’t exist), and then positions it relative to the sides of the closest positioned ancestor element (parent, parent’s parent, etc.). This is normally the <body> element, although as you’ll see later you can set it to anything you want.

fixed: This takes the element completely out of the document flow, just like absolute positioning, but instead of being positioned relative to the nearest positioned ancestor element, it is positioned relative to the browser window itself, meaning that the element will always stay in the same position on screen, no matter how much you scroll the contents.

The way you apply positioning is simple. You use the position property on the element you want to position:

img {
position: relative;
}

You then use the left, right, top and bottom properties to specify where you want to position it:

TIP

It doesn’t make sense to specify top and bottom properties at the same time, or left and right.

img {
position: relative;
left: 150px; top: 150px;
}

With relative positioning, the values specify how far away the element should be placed from the left and top edges of the element’s original position. (The other types work in a slightly different way, as you’ll see below.) The effect is something like Figure 21.1.

Figure 21.1: A simple example of what relative positioning does, with the original position of the element illustrated for clarity.

TIP

You can use any CSS units you like for specifying positioning values. Note also that you can use positioning on inline and block level elements.

With the basics covered, let’s look at each type of positioning in turn.