Why an HTML element being changed to "position: relative" will cover up other elements?

Question

I have a div 300 x 200px, and put some words in it with 180px font-size.

Below it, there are 2 images.

So naturally, the images cover up the words, because the images are at a later stage of the document, so it will cover up previous elements. (if the HTML elements are viewed as in a tree structure, then it is the order of depth-first-search)

But once I changed the CSS of that div to position: relative, then the words will cover up the images partially. (O will cover up the images only where there is a stroke of the letter, the space inside O will still show the images through)

I thought only by changing the z-index can I make it cover up the images? The words are still in the normal flow of the document... is there a special rule that says position: relative is supposed to cover up the other non-positioned elements?

Answer 1

Yes, positioning, z-index and floating all have an influence on the relative stacking of elements. And inheritance of these properties from ancestors.

You'll find a good tutorial/explanation on Mozilla's website: Understanding CSS z-index and a tool to visualize and play with on tjkdesign's site: How z-index works! (the related article is shorter than mozilla's one btw ;))
IE behaves ... differently (at least IE<8)