css - layers

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

The z-index property is used alongwith position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

<div style="background-color:red;
	width:300px;
	height:100px;
	position:relative;
	top:10px;
	left:80px;
	z-index:2">
</div>
<div style="background-color:yellow;
	width:300px;
	height:100px;
	position:relative;
	top:-60px;
	left:35px;
	z-index:1;">
</div>
<div style="background-color:green;
width:300px;
	height:100px;
	position:relative;
	top:-220px;
	left:120px;
	z-index:3;">
</div>

This will produce following result: