Re: confused about ‘relative’ and ‘absolute’ position !

[posterity576]

I agree with everything @Senff and @traq said and will just add (for reasons of clarity) that if position: relative has not been defined for any page element, then the parent of the absolutely positioned element or elements will be the top-most page element (_i.e._, html).

Take the bottom bit of code as a simple example:

The HTML:

This is a small chunk of text

The CSS:

.content {
width: 70%;
background-color: #BADA55;
}

span {
background-color: #facade;
position: absolute;
left: 0;
top: 0;
}

If you were to render the top bit of markup and CSS in a browser, you will notice that the span appears at the top-most and left-most part of the viewport. If, however, you want the span to appear at the top left of the div, simply give the div a position of relative, like so:

.content {
width: 70%;
background-color: #BADA55;
position: relative; /*assigning position: relative here makes this div the parent*/
}

It should be clear from the above that assigning a position: relative to the .content div forces it to be the parent of the span. Instead of appearing at the top-most and left-most part of the screen, the span will appear only at the top left of the div.

Cheers!