<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Image on top of another in HTML</h2> <img class="imgA1" src="https://placehold.it/500/333333"> <img class="imgB1" src="https://placehold.it/100"> </div> </div>

img { position: absolute; top: 20%; left: 25px; } .imgA1 { z-index: 1; } .imgB1 { z-index: 3; top:30%; left:10%; }