CSS Positioning

Now if you've set your position type to something other than static, like relative or absolute, then it's time to set its actual placement on the page. You do this with either the top:, left:, bottom: or right: properties. The most widely supported and used of these are the top and left properties. The bottom and right properties may not be supported by all browsers but if they are by your target browsers, then feel free to use them. If you set the top position then don't set the bottom and likewise with left and right. If you do, chances are the browser will use the top and left and ignore the others. Also you can set just one if you wish, say top for example, and let the browser set the left.

The values for these can be auto, which lets the browser decide, a value such as pixels, points, inches, etc. that we've already used in other sections of this tutorial, or a percentage. What you use is up to you and what you're trying to do. Here's an example of how to write a positioning style:

And here's how you might implement it: And here's how it looks:

You don't have to use divisions to position things. If what I wanted to position had been something like an image. I could have just assigned the id=“myBox” to the image.

Seems pretty simple, huh? In most cases it would have been. But since my pages here have boxes nested inside of boxes, creating the above example created some problems for me.

The browsers weren't recognizing the purple box as myBox's parent element even though it's nested inside of it. myBox was being positioned off of the last division that I had used positioning on. It was appearing on top of the "CSS Positioning" header above. To get browsers to recognize the purple box as myBox's parent element I had to add position:absolute; to the style declaration for the purple box. I didn't declare anything for top, left, bottom or right. This took care of that! But... the paragraph below the purple box was now behind it. So I changed the purple box's positioning from absolute to relative and that ended the problems.

The point to what I'm saying here is that sometimes you have to be a bit of a detective to figure out just how browsers are interpreting these things sometimes. That and since I learned something here about getting browsers to recognize a parent element, I thought I would pass it along and maybe save you some frustrations in the future (I know it will me and would have in the past).

Now let's move along to the next page and next example with relative positioning. Then we'll cover the all important and useful z-index.