CSS Layers

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 in the source code than others will have a higher priority by default. If there are two overlapping CSS positioned elements, the element with the higher priority will appear on top of the other.
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 each other 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!

Posted in: CSS