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?
position:relative allows the content to be positioned relative to the container. If positioned outside the natural boundary of the container then it will cover anything that is position:static (the default).
No, in the normal flow the images will appear underneath the text, unless you’ve applied some special CSS.
The situation is not clear the way you’ve described it. It would be better post some code so we can see what you are actually doing. Otherwise we are guessing a bit.
If you apply position: absolute to an element, it will position itselff in relation to the first ancestor element that has position: relative. It also loses its natural place in the flow of elements.
Position: relative preserves an element’s position, but you can move it visually from that position if you set some coordinates such as top: or left: