允许具有预定义大小的重叠图像

Question

是否可以允许图像以固定大小（在我的情况下为 155px）重叠另一个 div（引导列）

我使用引导列（col-9 和 col-3）

这是我想要实现的（例如，橙色和灰色框是图像）

还有其他方法可以实现吗？ 谢谢

Answer 1

您可以通过将col-9 边距设为负值并将其设置在具有z-index 属性的另一个框上方，如下代码所示

<div class="row">
   <div class="col-9">
      col-9
   </div>
   <div class="col-3">
      col-3
   </div>
</div>

和 CSS

.row > *{
    background: gray;
    height: 350px;
}

.col-9{
    background-color: orange;
    height: 195px;
    margin-top: 155px;
    margin-right: -40px;
    z-index: 10;
}