CSS Positioning

If you're going to position things on a web page the first thing you need to do is let the browser know what type of positioning you plan to use. That's as simple as using code like this:

What isn't so simple is understanding the value choices you have for the position property and when to use each one. Here's a list of them with a description of what each one means:

static:

You think they would call this one default because that's pretty much what it is. This one places it on the page where it goes in the normal flow of code. No need to set a property and value such as top:10px; with this one.

relative:

This one places an element on a page relative to where it would be within its parent element. So, say you would like to move something down from the top 10 pixels. After declaring position:relative; the next declaration would be top:10px; and it moves down 10 pixels. If the visitor resizes their browser and the elements position changes, it's new position will still be 10 pixels lower then it would be otherwise.

absolute:

This one does just what you think it should. Declare it then set positions for top, left, bottom or right and that should be where it is positioned with regard to its parent element.

fixed:

This one is for what you might think it is. Whatever has a fixed position should stay where you place it even if you scroll the document in the browser window. Like the fixed property for background images. It would be great for things like navigation that you always want to be visible all the time. I say "would be" because most browser don't support it yet. It should come in handy when they do though.

Now you would think it's pretty clear cut which one you should use and when. Absolute when you want an exact placement and relative when you just want to move it out of place a bit but still allow it to move when its parent element changes sizes. Not always true. There have been times when I've wanted one box to overlap another. I used absolute positioning and some browsers displayed it as expected and others were all out of wack. Changing it from absolute to relative and nudging it into place corrected things with all test browsers. Other times neither worked until I put a border on the top and bottom of the box the same color as the background so it wouldn't be seen. End of problem.

Why did I have these problems? Not all browsers support positioning the same and bugs in some browsers. These can become real problems with margins, padding and borders when position elements. Some browsers will treat things just like you expect, others will treat margins and padding like they are the same thing. When developing pages, I used borders on my boxes like on this page, so I could see where each of those boxes where. That is until I removed them from one page and everything changed position in some browsers. Now I use a different background color in each box to see where they are.

If you are having positioning problems when you use margins or padding, position the offending box without them then nest another box inside it with the margin or padding you want. This is a little more work than it should be, but it's a functional work around for the problem.

I wish I could be more precise with which position value you should use and when, but there are just to many variables to do that. My best advice is to try different things and test them in a variety of browsers that you expect your audience to be using. As you become more experienced with positioning, you'll eventually get a feel for it and be able to narrow down the causes of your problems.

By now I would have normally given you several examples of what I'm talking about. But before I can do that, you need to know the properties and values for setting the actual placement of the elements and not just the type. Since this page is getting long, we'll continue with that on the next page which will give you a clearer picture of placing things.

Positioning Page 1.   Positioning Page 3.