This is my attempt... And I wish even the 'wrapper_2' and 'wrapper_3' become longer as the first wrap, but I don't know where to put them in the html file...
#wrap {
position: absolute;
margin: 18px 0 0 16px;
width: 350px;
background-color: rgba(0, 90, 150, 0.9);
margin: 20px solid white;
}
li.DDList{
display: block;
list-style-type: none;
margin-left: -40px;
}
.wrapper_2 {
position: absolute;
z-index: -2;
margin-top: 88px;
margin-left: 90px;
width: 380px;
height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
background-color: white;
border: black;
}
.wrapper_3 {
position: absolute;
z-index: -4;
margin-top: 94px;
margin-left: 95px;
width: 380px;
height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
background-color: white;
border: black;
}
<li class="DDList">
<div>
<input class="incarico" name="incarico" placeholder="New Daily Task">
</div>
</li>
<li class="DDList">
<div>
<input class="incarico" name="incarico" placeholder="New Daily Task">
</div>
</li>
<li class="DDList">
<div>
<input class="incarico" name="incarico" placeholder="New Daily Task">
</div>
</li>
</ul>
/*END WRAP 1*/
</div>
<div class="wrapper_2"></div>
<div class="wrapper_3"> </div>
<script src="jquery-3.3.1.min.js"></script>
<script src="js/onclickEvent.js"></script>
</body>