在引导程序中重叠图像

Question

我想重叠两个图像，使底部图像到达顶部图像。 这是代码

{{1}}

这是附带的截图

我想要像这样

Answer 1

您需要使用position:absolute;添加position:relative，因为我使用了

  .col-md-6{
   margin: 1px; 
 }
 
.picContainer {position:relative;}
.pic2 {position:absolute; top:0px; left:0px;}

<href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
 
 <div class="container-fluid picContainer">
    <div class="row">
           <div class="col-md-6"><img src="http://www.qygjxz.com/data/out/114/4676052-image.png"></div>
       <div class="col-md-6 pic2"><img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg"></div>
   </div>
    </div>

    </body>
   </html>

Answer 2

即使你可以使用absolute定位来满足你的要求，我也不认为这是现在最好的方法。您可以使用简单的边距调整来实现它。

我希望这是你正在寻找的东西。

HTML

<div class="header">
  <h1>Header</h1>
</div>
<div class="content">
  <div class="image-container">

  </div>
</div>

CSS

.header {
  width: 800px;
  height: 200px;
  background-image: url('http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg');
  background-size: cover;
  background-position: center;
}
h1 {
  text-align: center;
  color: #fff;

}
.image-container {
  width: 600px;
  margin-left: 100px;
  margin-top: -50px;
  height: 200px;
  background-image: url('https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg');
  background-size: cover;
  background-position: center;
}

参考codepen示例