in

CSS LAYERS | Set The Layers Of Web Page Elements Using CSS

In this tutorial we will be looking at CSS layers and how to set the layers of element on your web page using the CSS z-index property. In our previous tutorial we discussed about CSS positioning and how you can position elements on your web page using the CSS positioning property. The previous tutorial is highly important because we will be making use of some of the steps discussed over there on this short tutorial. If you haven’t gone through the previous tutorial you can do so using the link below.

Read previous tutorial on: CSS POSITIONING | Set The Position Of Web Page Elements Using CSS

CSS LAYERS

CSS allows developers to structure elements over other elements as they overlap each other. For example we can place an element having a color over another element with same color or different color using the CSS z-index property. The syntax for this element is z-index: value from 1-any number; the numbers used depends on the element you want to show up first. The element with the highest number shows up first. Example shown below.

In the below example we will be setting three colors without the z-index property. Then we will be using the z-index to control the colors that comes up first.

Example without z-index

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF CSS LAYERS WITHOUT Z-INDEX PROPERTY</title>
</head>
<body>
   <div style="background-color: red;
   height: 100px;
   width: 300px;
   position: relative;
   top: 80px;
   left: 80px;"></div> 

<div style="background-color:green;
height: 100px;
width: 300px;
position: relative;
top: -5px;
left: 100px;"></div> 

<div style="background-color:blue;
height: 100px;
width: 300px;
position: relative;
top: -80px;
left: 120px;"></div>
</body>
</html>

RESULT

ILLUSTRATION OF CSS LAYERS WITHOUT Z-INDEX PROPERTY

In the above example we have the blue color coming first followed by the green color and then red comes last. We are going to use the z-index property to set the red color as first, blue will come second and the green will come third while overlapping each other.

To achieve this;

  • we add z-index: 3; to the element with the red color
  • we add z-index: 2; to the element with the blue color
  • we add z-index: 1; to the element with the green color

Example with z-index

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ILLUSTRATION OF CSS LAYERS WITH Z-INDEX PROPERTY</title>
</head>
<body>
   <div style="background-color: red;
   height: 100px;
   width: 300px;
   position: relative;
   top: 150px;
   left: 150px;
   z-index: 3;"></div> 

<div style="background-color:green;
height: 100px;
width: 300px;
position: relative;
top: -5px;
left: 100px;
z-index: 1;"></div> 

<div style="background-color:blue;
height: 100px;
width: 300px;
position: relative;
top: -80px;
left: 120px;
z-index: 2;"></div>
</body>
</html>

RESULT

ILLUSTRATION OF CSS LAYERS WITH Z-INDEX PROPERTY

we can alternate the colors to whatever we intend coming before each other using the z-index property.

CONCLUSION

As said earlier we use the CSS LAYERS property to control the position of an element with the help of the z-index property. This is very important when you intend placing an element over another element on a particular position while overlapping each other. Lets move to the next tutorial on CSS PSEUDO CLASSES

What do you think?

css positioning

CSS POSITIONING | Set The Position Of Web Page Elements Using CSS

css pseudo classes

CSS PSEUDO CLASSES | Learn How to Add Special Effect To Selectors