Hello World

The first thing you need to know is how position: relative and absolute affect an element.

If you set the position property of an element to either relative, absolute or static makes the element a containing block. If an element is a containing block, it means that all the child elements inside it that are positioned with absolute positioning will have their positions calculated from the top left corner of their parent.

In other words, if you have a div that has position: absolute and top: 0 and left: 0, it will go to the top corner of the containing block it is in. This is either the body element or the closest parent element of the div that has position: absolute, relative or static.

Putting position: absolute to use

If the above text didn't make much sense to you, don't worry. I will demonstrate what it means in a bit.

In several occasions position: absolute has been very handy to me. Here's an example:

If you have a header and you want to have a menu in the header. You can first create the header background in Photoshop or your graphics tool of choice. This will be the background for the header and the menu, but it must not contain any of the menu graphics.

Next, you can create the menu graphics or if it doesn't need any graphics, skip this.

Now, just create a header div that has the header background. Give it position: relative to make it a containing block. Now, add your menu HTML code inside the div. It will probably stick in the top left corner and that's not where you want it, so give the menu element position: absolute and use top and left to move it where you want.

Because it calculates the position from the top left corner of the header div, it will always be in the correct position!

I used this method recently in a project. See a sample here. This is a very useful method in my opinion, as if you need, you can add more stuff inside the header element too, like in the sample page there's a submenu place holder.

Another absolute usage

I haven't seen this one used on any sites or even mentioned anywhere, so I'll just claim I invented this.

Gradients are often used in designs these days. But what if you want to change the background color of an element that has a gradient background? You will need to create a whole new image. Also, as this allows you to re-use the gradient, it will save you space and the total size of the site will be smaller.

How about just creating the gradient you want and using CSS to pick the background color? Wouldn't that be nice? Well, here's a solution!

Create your gradient, save it as PNG. To make the gradient work properly in Internet Explorer, read my post about making PNG work.

After you have a gradient, create a simple div. Again, give the div a relative position to make it a containing block. Now, create a div inside this div and give that the gradient as a background and make it absolutely positioned so it stays in the top and won't block anything else. Now, just add text or other content to the container div. If you want the content go on top of the gradient, make a new div after the gradient div and make that have a relative position and give it a z-index one higher than the gradient div's.

See demo of gradient this gradient trick here.

So what about position: relative?

Well, aside from using as a containing block, I haven't really found any other uses for it... but if you know a good one, post a comment!