Как 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;
        }

Я хотел, чтобы LEFT div был видимымпо второму столбцу (кол-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

Вы можете просто присвоить вашему col-3 div position: absolute примерно так: это нарушит его поток контента и позволит ему appera ABOVE 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>