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

我需要第一个引导程序列中的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）上可见。那可能吗？

最佳答案

<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

关于css - 一个引导列中的DIV如何与另一列中的内容重叠？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58206377/