CSS Z-index Property

CSS Z-index Property (CSS Layers): The CSS allows creating layers with various divisions. The Z-index property is used to create CSS layers that help to overlap with each other.

The Z-index Property

This Z-index property is used with the position property to get the effects of layers. The CSS allows us to specifies the order of the images to overlap.

With the help of z-index property, the CSS allows us to create more complex web page layouts.

The Z-index Property Example

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

The Z-index Property Example Output

The Z-index Property Example Output