<html>
  <head>
    <title>Z-index</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box_1">
      <h2>First box. Z-index 1</h2>
    </div>
    <div class="box_2">
      <h2>Second box. Z-index 2</h2>
    </div>
    <div class="box_3">
      <h2>Third box. Z-index 3</h2>
    </div>
    <div class="box_4">
      <h2>Forth box. Z-index 4</h2>
    </div>
  </body>
</html>
h2{color:#fff;}
div{
padding:10px;
border:#000 1px solid;
width:230px;
height:230px;
margin:30px;}

.box_1{background:#16a085;
position:relative;
left:20px;
top:20px;
z-index:0; }

.box_2{background:#e67e22;
position:relative;
left:80px;
top:-180px;
z-index:1; }
.box_3{background:#27ae60;
position:relative;
left:160px;
top:-360px;
z-index:2; }
.box_4{background:#8e44ad;
position:relative;
left:240px;
top:-540px;
z-index:3; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.