容器 div 内的弹出窗口扩展容器高度，不出现在顶部答案

【问题标题】：Pop-up inside container div expanding container height, not appearing on top容器 div 内的弹出窗口扩展容器高度，不出现在顶部
【发布时间】：2015-11-10 01:04:20
【问题描述】：

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

基本布局和样式是：

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

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

【问题讨论】：

height 正在影响..
您是否错过了父 div (cell_Value) 的 css？我没有在你的小提琴或代码 sn-p 中找到它，你链接到的文章说它和祖父母 div 与孩子的关系是允许这种效果发生的原因。如果我有时间构建和测试小提琴，我会为你测试它，但我今天早上必须开始工作。如果稍后我有时间仍然没有答案，我会进一步研究。
试试这个：.popup { overflow-y: hidden; }
@Chris - 在我尝试任何操作之前，小提琴就像当前的标记/样式一样，并且 .cell__Value 类的 div 没有应用任何有意义的样式。根据文章将溢出样式从祖父母单元格移动到此 div 似乎并没有达到我想要的效果 - 我怀疑这是由于与其他位置的关系：绝对祖先。 @ zer00ne，隐藏弹出窗口的溢出不是我想要实现的。我希望整个弹出内容在网格顶部可见，并在必要时扩展到视口之外。

标签： css html

【解决方案1】：

如果我了解您的问题，那么修复应该很容易。

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

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

【讨论】：

在小提琴中效果很好，但是当我对实际标记执行相同操作时，弹出窗口仍然被切断。需要找出是什么原因造成的......
因为你使用了溢出：隐藏；在 .viewport 上