Question

我正在使用类似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中。我可以在没有包含视口的情况下实现我想要的布局。

基本布局＆amp;造型是：

<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/，我无法在此处使用它。

基本上，画布必须滚动y溢出内容，以便网格行可滚动并且不会填满整个页面。小提琴中的弹出窗口是一个信息div，应该在用户点击单个单元格时出现。如模拟显示，大弹出窗口的高度会导致视口和画布滚动，而不是允许弹出窗口显示在视口顶部和部分视图之外。

我试图遵循这里的建议 - http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent，但无济于事。我也试过浮动弹出窗口并增加z-index。

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

Answer 1

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

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

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

容器内部弹出容器扩展容器高度，不显示在顶部

1 个答案: