来自一个引导列的DIV如何能够与另一个列的内容重叠？

Question

我需要一个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;
        }

我希望左边的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

Answer 2

您只需给出一个类似于这样的position: absolute：这将打破它的内容流，并让它在之上的上运行-- col-9 div。

.overlay{
position: absolute !important;
top: 0;
left: 0;
background-color: yellow;
opacity: 1;
z-index: 2000;
}

.bg-danger{
opacity: 1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
  <div class="col-3 overlay">
    Im Over the col-9 DIV
  </div>
  <div class="col-9 bg-danger">Content that can be the shadow.</div>
</div>

​