CSS3 > Layers

Layering elements in CSS3

How to set the layers using Z-index property in CSS


  • Layers are defined as multiple layers which covers different multiple sheets under one sheet is called layers, It uses the property called z-index to define the layers in css.
  • The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.
    <div style="background-color:red; width:300px; height:100px; position:relative; top:100px; left:80px; z-index:2">Layer2
    <div style="background-color:yellow; width:300px; height:100px; position:relative; top:50px; left:35px; z-index:1;">Layer3
    <div style="background-color:green; width:300px; height:100px; position:relative; top:-140px; left:120px; z-index:3;">Layer1
  • In the above code snippet we have defined the layers which uses the property z-index to change the layers by giving the value of the zindex value,
  • Height and width value to change the position of the layer, the position elements changes the values in the layers to set the different positions of the layers 


 Views: 754 | Post Order: 128

Write for us