堆叠一些图像

Question

在我的代码上，我试图能够堆叠像

这样的图像

后面有两张图片，一张在上面。

我尝试过使用浮点数和z-index

  

问题我如何才能获得它，以便我的图像与上例相同？

工作DEMO ＆lt; - 已更新工作解决方案

<div class="container">
<div class="row">

<div class="col-lg-12">
<img data-src="holder.js/50px320?theme=social" class="img-thumbnail img-1">
<img data-src="holder.js/50px320?theme=lava" class="img-thumbnail img-2">
<img data-src="holder.js/50px320?theme=grey" class="img-thumbnail img-3">
</div>

</div>
</div>

CSS

.img-1 {
   z-index: 2;
   float: none;
   clear: both;
}

.img-2 {
   float: left; 
   z-index: 1;
}

.img-3 {
   float: right; 
   z-index: 1;
}

Answer 1

这是另一种解决方案：

.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;
}

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

Answer 2

摆脱浮动并清除，以便您可以使用position属性。将容器设置为相对定位并将图像设置为绝对定位。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

注意： z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。