是否可以在不调整div大小的情况下让图像溢出div？

Question

背景

我正在使用Bootstrap 4创建布局。

这是一张大致显示我想要完成的图像：

大致来说，它是这样构建的：

<div class="row">
    <div class="col-12 col-md-3">
        <img src="..." style="width:100%; max-width: 400px;" />
    </div>
    <div class="col-12 col-md-6">
        TITLE
    </div>
</div>

<div class="row">
    <div class="col-12 col-md-6 offset-md-3">
        CONTENT
    </div>
</div>

自从我使用BS4以来，我就拥有了一个响应式布局，以便所有这些元素都堆叠在较小的设备上，而在中等大小的设备和较大的设备上保持图示的布局。

我的问题

图像的大小是合理的，但是除非我使用max-width css属性使图像很小，否则它将向下推动线L2（如图所示）。

我的目标

我想要的是该图像稍大一些，而无需更改包含它的<div class="row">的高度。即，无需向下推L2。

换句话说，我希望图像能够溢出其容器。

这可能吗？

我尝试过的事情

我已经研究了各种overflow-y css属性，但没有一个能做到这一点。

任何帮助将不胜感激。

目标

Answer 1

您始终可以使用z-index！只需将第一行位置设置为“相对”，然后应用适当的z-index。之后，只需为图像容器设置一个比包含div长的设置高度即可。

我在这里创建了一个简单的工作示例：https://jsfiddle.net/cf8z06ya/

.firstRow {
  width: 100%;
  background-color: red;
  height: 50px;
  position: relative;
  z-index: 1;
}

.secondRow {
  width: 100%;
  background-color: yellow;
  height: 50px;
}

.overrun {
  width: 50px;
  height: 100px;
  background-color: black;
}

希望这会有所帮助！