zIndex How to Use ZIndex CSS property and values Coding Example

by

CSS property that sets the position of the element, allowing the CSS to change the default stacking order.  The default zindex value is 0, using an integer larger than 0, and overlapping the position of the page elements can be done by setting the value of the zindex property. 

<!DOCTYPE html>
<html>
<head>
   <title>HTML and CSS</title>
   <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
   <div class="output">
       <div class="box1">Hello World</div>
       <div class="box2">Laurence Svekis</div>
       <div class="box3">Test</div>
       <div class="box4">Last Box</div>
   </div>
</body>
</html>

.output > div{
   border:5px solid black;
   width:200px;
   height:100px;
   position:absolute;
}
 
.box1{
   background:blue;
   top:10px;
   left:10px;
   z-index:10;
   opacity:0.9;
}
.box2{
   background:green;
   top:20px;
   left:20px;
   z-index:5;
   opacity:0.5;
}
.box3{
   background:red;
   top:30px;
   left:30px;
   z-index:1;
   opacity:1;
}
.box4{
   background:yellow;
   top:40px;
   left:40px;
   z-index:150;
   opacity:0.9;
}
zIndexDownload