After learning how to position HTML elements, you may have noticed how this can lead to HTML elements being on top of one another. CSS allows you to control which item will appear on top with the use of layers.

In CSS, each element is given a priority. HTML elements that appear later than others will have a higher priority by default. Elements with the highest priority will appear on top, followed by the next highest, and so on.

To manually define a priority set the z-index value. The larger the value, the higher the priority the element will have.

CSS Code:
h4{
     position: relative;
     top: 30px;
     left: 50px;
     z-index: 2;
     background-color: #336699;
}

p {
     position: relative;
     z-index: 1;
     background-color: #FFCCCC;
}
display:
Header Z-Index = 2
You probably can't read this part, so I will fill it in with useless text for the time being. This paragraph has a z-index of 1, which is less than the header. As you can see, the header has been moved down, using positioning, and is now resting on top of this paragraph. If we had not defined the z-index, by default the paragraph would have been on top of the header because it appears later in our HTML code.

Other ways to utilize layers might be to place a few images on top of eachother to create a beautiful collage, have your menu slightly overlap you content pane, or anything your imagination can come up with. Just remember to keep your web site user-friendly!








http://www.tizag.com/cssT/layers.php