如何在.row下的两个div之间添加图像（使用bootstrap 4）

Question

这是我的代码：

<div class="row"style="">

  <div class="panel panel-success col-sm-3" style="background-color: #d16b55; ">

    <div class="panel-body" style="height: 1000px; margin-left: 50px;overflow: hidden !important;">   

      <img class="card-img-top" src="movie_poster/sonic-the-hedgehog.jpg " alt="Card image" style="height:370px;width:100%;margin-top:15px;position: absolute;left: 50px;overflow: visible;">

    </div>

  </div>

  <div class="panel panel-success col-sm-9 " style="background-color: #ffe2db;"><div class="panel-body"></div></div>

</div>

请检查此图像，我 100% 确定图像的一半隐藏在第二个 div 后面。删除第二个 div 时我可以看到它。

Answer 1

这是一个分层问题，放在两个 div 之后效果很好代码： <div class="row"style="margin-top: 10px;">      <div class="panel panel-success col-sm-3" style="background-color: #d16b55; ">        <div class="panel-body" style="height: 1000px; margin-left: 50px;overflow: hidden !important;">           </div>      </div>      <div class="panel panel-success col-sm-9 " style="background-color: #ffe2db;"><div class="panel-body"></div></div>      <img class="card-img-top col-sm-3" src="movie_poster/sonic-the-hedgehog.jpg " alt="Card image" style="height:370px;width:100%;margin-top:15px;position: absolute;left: 100px;">    </div>

Answer 2

最后加载的图像将位于“顶部”，但是如果您的 div 的边距值为正，则您的内容不应重叠。