Stacking Some Images

On my code I am trying to be able to stack images like Where there are 2 images behind and one on top. I have tried using floats and z-index Question how can I get it so my image

Solution 1:

Here's another solution:

.img-1 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
   z-index: -1;
}

.img-2 {
  display: block;
  position: absolute;
  top: 30px;
  right: 0;
  z-index: -1;
}

.img-3 {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script><divclass="container"><divclass="row"><divclass="col-lg-12"><imgdata-src="holder.js/50px320?theme=social"class="img-thumbnail img-1"><imgdata-src="holder.js/50px320?theme=lava"class="img-thumbnail img-2"><imgdata-src="holder.js/50px320?theme=grey"class="img-thumbnail img-3"></div></div></div>

Solution 2:

Get rid of your floats and clears so that you can use the position property. Set the container to relative positioning and set the images to absolute positioning.

.container {
  postion: relative;
}
.img-1 {
  position: absolute;
  left: 40%;
  top: 0;
  z-index: 2;
}
.img-2 {
  position: absolute;
  left: 20%;
  top: 50px;
  z-index: 1;
}
.img-3 {
  position: absolute;
  left: 60%;
  top: 50px;
  z-index: 1;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script><divclass="container"><divclass="row"><divclass="col-lg-12"><imgdata-src="holder.js/50px320?theme=social"class="img-thumbnail img-1"><imgdata-src="holder.js/50px320?theme=lava"class="img-thumbnail img-2"><imgdata-src="holder.js/50px320?theme=grey"class="img-thumbnail img-3"></div></div></div>

Note:z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).