Tutorial search

Tutorials
Stuff
Affiliates

Photoshop Templates


Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS Layers - CSS tutorial


This tutorials explains the layers principle in CSS and how to set depth of your CSS elements
Category: CSS tutorials - Difficulty:


In the previous lessons, we were able to discuss about the two basic dimensions of CSS. In this lesson, we will introduce to you the third dimension called, depth. More so, we will teach you how to let different element become layers. You can now learn how to make elements overlap each other.

In order to do that, we need to first assign a number for each element. When you use the z-index, it will make an element with a higher number overlap an element with a lower number. The larger the value, the higher the priority the element will have.

The basic principle behind this property is that, elements can be given priority.

Here is a sample code:

#Cum Laude {
position: absolute;
left: 100px;
bottom: 100px;
z-index: 1;
}

#Magna Cum Laude {
position: absolute;
left: 115px;
bottom: 115px;
z-index: 2;
}

#Suma Cum Laude {
position: absolute;
left: 130px;
bottom: 130px;
z-index: 3;
}

Now, you know how to make images or texts overlap to create priority. There is still endless ways to utilize this property. Just continue to explore but do not forget to keep you website user friendly.