Mainpage
z-index tells the elements how the are stacked within the page. Which elements lies on top, which one below, in case that they are taking up partially or completely the same place in the page. Normally they get stacked the way they get adressed in the html markup: Each element is one level higher as the one before. Since we are talking about positioning along the z-axis (like coming out of the screen, the stack), we have to set position: to relative or absolute, for the z-index to work.
Look at this example: Let's say I want a link to something, and then below it as an ornament or whatever
I put a HUGE letter m. I since it's the small m, there's a lot of empty space above it, if I just position the
elements as they come. So I move the m up 80 pixels with position:relative;
top:-80px;. Looks nice huh? Try to click on the link.
Doesn't work, eh? Why not? Because the m is above the link, since it comes after the link in this HTML markup. Each element gets piled on top of the previous one, as they appear reading the HTML page from top to bottom. And since we moved the m up by 80 pixel, it's covering the link.
Let's look at the same example, but this time with borders around the elements for clarification.
The blue border shows the space that the div around the letter m takes up. Can you see how it takes space going well over the link (in the green border)? And since I build the element containing the letter m after the link, the link is under the div holding the m. We can see the link since the background of the div is transparent.
Okay, let's take the same thing again, but this time we make the background of m's div be teal.
See, the link is still there, but you can't see it, it's covered by the teal-colored box above it!
We have now two options, either we just write the link after the div holding the m and then move it up via positioning, until it's above the letter m, or we use z-index. The higher the value of the z-index is, the closer it is to the viewer (virtually). An element with the z-index of 10 is above one with the z-index of 0.
So, let's give the div containing the letter m a z-index of 0, and the link a z-index of 10:
Now the link is back, and this time, since it's positioned above the teal-colored box, it's even clickable!
