Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Z-index</title>
</head>
<body>
<div class="rela">
  <div class="abso-1"></div>
  <div class="abso-2"></div>
  <div class="abso-3"></div>
</div> 
</body>
</html>
 
.rela {
  position:relative;
  border:1px solid #999;
  background-color:#ececec;
  width:300px;
  height:200px;
  }
.abso-1 {
  position:absolute; 
  left:50px;
  top:20px;
  background: red;
  width:100px;
  height:100px;
  z-index:300;
  }
.abso-2 {
  position:absolute; 
  left:100px;
  top:40px;
  background: blue;
  width:100px;
  height:100px;
  z-index:200
  }
.abso-3 {
  position:absolute; 
  left:150px;
  top:60px;
  background: green;
  width:100px;
  height:100px;
  z-index:10
  }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x