gpt4 book ai didi

css - 在容器 div 内弹出扩展容器高度,不出现在顶部

转载 作者:太空宇宙 更新时间:2023-11-03 19:30:33 26 4
gpt4 key购买 nike

我正在处理类似 Excel 的网格,但无法正确显示弹出窗口,因为底部似乎被容器 div 截断了。

问题与CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container 非常相似我正在寻找类似的结果,但在一个包含的 div 中。我可以在没有包含视口(viewport)的情况下实现我想要的布局。

基本的布局和样式是:

<body>
<div class="viewport">
<div class="canvas">
<div class="rows">
<div class="row">
<div class="cell">
<div class="cell__Value">
<div>
<div class="popup">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

.viewport {
height: 150px;
width: 400px;
background-color: blue;
overflow: hidden;
position: absolute;
top: 35px;
}

.canvas {
height: 149px;
width: 399px;
background-color: lightblue;
overflow-y: scroll;
overflow-x: auto;
position: absolute;
}

.rows {
height: 100px;
width: 700px;
background-color: red;
overflow: hidden;
}

.row {
background-color: darkred;
height: 35px;
overflow: hidden;
}

.cell {
background-color: green;
position: absolute;
left: 100px;
width: 100px;
height: 35px;
overflow: visible;
}

.popup {
background-color: lightgreen;
opacity: 0.8;
position: relative;
width: 150px;
height: 200px;
}

我使用 jsFiddle 创建了一个模拟版本 - http://jsfiddle.net/huf45f2h/2/ ,我也无法让它在这里工作。

本质上, Canvas 必须滚动 y-overflow 内容,以便网格行可以滚动并且不会填满整个页面。 fiddle 中的弹出窗口是一个信息 div,当用户单击单个单元格时应该出现。如模拟所示,大型弹出窗口的高度会导致视口(viewport)和 Canvas 滚动,而不是让弹出窗口出现在顶部并部分出现在视口(viewport)之外。

我尝试遵循此处的建议 - http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent ,但无济于事。我也试过 float 弹出窗口并增加 z-index。

如何根据需要显示弹出窗口?

最佳答案

如果我理解你的问题,修复应该很容易。

只需将位置设置为固定,然后它就会位于其他所有内容之上。这是一种非常常见的弹出窗口方法。

.popup {
background-color: lightgreen;
opacity: 0.8;
position: fixed;
width: 150px;
height: 200px;}

关于css - 在容器 div 内弹出扩展容器高度,不出现在顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32049618/

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