<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content1"></div> <div class="content2"></div> <div class="content3"></div> <div class="content4"></div>

.content1 { position: relative; background: red; width: 100%; height: 100px; z-index: 1; } .content2 { position: absolute; top: 50px; background: rgba(255, 255, 255, 0.7); width: 100%; height: 100px; z-index: 2; } .content3 { position: absolute; top: 90px; background: blue; width: 100%; height: 50px; z-index: 3; } .content4 { position: absolute; top: 0; background: rgba(219, 219, 219, 0.5); width: 100%; height: 140px; z-index: 4; }