Positioning tags on a page

CSS positioning gives you control over the layout of your page. Instead of building tables to arrange objects on the page, you can place each tag exactly where you want it.

When a browser displays a tag, it puts it in an invisible box (back to the box model). Each box has a content area (text, a picture and so on) and optional surrounding padding, border and margin areas. This is called the containing block.

Well, as we have the box, we can position it. Some of this stuff is new and a bit complicated so you’ll just get a brief overview.

Your first option is to forget all this stuff and do nothing. Use the normal flow. Let the browser deal with it. The display property affects the normal flow because it decides whether a tag, for example, is a block with a break before and after (like a paragraph), an in-line item like a link, or a list item. You probably won’t ever mess about with this property but I just thought I would mention it.

For a bit more sophistication, you can use the float property. This lets you wrap text around any tag. You can already do this for pictures by using the align attribute of the <img> tag to let the text flow around the picture but now you can do the same with other tags so you can float a table, a heading or a paragraph. The clear property is float’s evil twin; it counteracts the effects of a float and moves text below a floating element. Useful if the content is unrelated to the adjacent floating tag.

Alternatively, use the position property together with the top, bottom, left and right properties to:

Set the box's distance from the top and left edge of the page (absolute positioning)
Set the box's distance from the top and left edge of the browser window (fixed positioning)
Offset the box against other tags on the page (relative positioning)

You can also specify the height and width of the box and, if you want to, the maximum and minimum height and width of the box.

You might find that the content of a tag won't fit in the box that you define for it or that tags overlap. Use the clip and overflow properties to define how you want to deal with this. You can:

Use the clip property to cut off an area of an element. For example, you can clip the top tag so that it reveals another one beneath it
Use the overflow property to specify what happens to objects that don't fit into the box

You can even use the z-index property to layer tags on top of one another.

Finally, you can make entire tags visible or invisible with the visibility property.