css - 一个引导列中的 DIV 如何与另一列中的内容重叠？

Question

我需要第一个 bootstrap 列中的一个 div 溢出 x 轴，我需要在其右侧的第二列上方查看其内容。

    <div class="row h-100">
        <div class="col-3 bg-info">
            <div class="LEFT">Content to be viewed</div>
        </div>
        <div class="col-9 bg-danger">Content that can be the shadow.</div>
    </div>

        div.row{
            overflow-x: auto;
        }
        div.col-3{
            overflow-x: visible;
            z-index:10;
        }
        div.popo{
            background-color: yellow;
            width:600px;
        }

我希望 LEFT div 在第二列 (col-9) 上可见。这可能吗？

Answer 1

<div class="row h-100">
  <div class="col-3 bg-info">
    <div class="LEFT">Content to be viewed</div>
  </div>
  <div class="col-9 bg-danger">Content that can be the shadow.</div>
</div>

.row {
  position: relative;
}
.bg-info {
  position: static;
}
.LEFT {
  position: absolute;
  text-align: center;
  top: 50%;
  right: calc( ( 4.5 / 12 ) * 100% );
  width: calc( ( 9 / 12 ) * 100% ) ;
  transform: translate(50%, -50%);
  z-index: 2;
  background-color: rgba( 1, 1, 1, .3);
}

https://codepen.io/Deykun/pen/GRKVYKZ