CSS Layers

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.

h4{ 

     position: relative; 

    top: 30px;

    left: 50px;

    z-index: 2;

    background-color: #336699;

    }



p {  

      position: relative; 

    z-index: 1; 

    background-color: #FFCCCC;

    } 

 

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!