Open relative.html and save it as zindex.html.  View the page noting that the blue div appears to be on top of the green one (covering it partially).  Change the styles for #first by adding this line:


Now change the styles for #second by adding this:


Now the green div should cover the blue one partially.

In that page you have two divs.  Imagine the divs as playing cards being dealt out.  Later cards will cover earlier ones just as the div elements do.  If elements overlap earlier ones then the ones which come later in the code appear on top (in the third dimension).  This is known as the z-index after the third dimension used in graphs (the three being x, y and z).

If you do not set it then z-index is in effect set to auto.  Later elements appear on top of earlier ones.  To change that you set the z-index to a numerical value.  A higher value means the element appears on top.

If you try z-index on a page and do not get the results you expected you probably need to look at parent elements and their z-index.