Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
  position: relative;
}
.box1 {
  position: relative;
  z-index: 1;
  border: solid;
  height: 100px;
  margin: 50px;
}
.box2 {
  position: absolute;
  z-index: 2;
  background: pink;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 120px;
  opacity: 0.9;
}
.box3 {
  position: absolute;
  z-index: 3;
  background: cyan;
  width: 70%;
  left: 40px;
  top: 60px;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<div class="wrapper">
  <div class="box1">Box 1 - has z-index: 1</div>
  <div class="box2">Box 2 - has z-index: 2 (will be put above .box1)</div>
  <div class="box3">Box 3 - has z-index: 3 (will be put above .box1 and .box2)</div>
</div>