gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:17:14 24 4
gpt4 key购买 nike

我需要第一个 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) 上可见。这可能吗?

最佳答案

<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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com