避免元素在"溢出:隐藏"元素内被切断

Question

我正在使用本页概述的相同高度的CSS技巧.

直到今天我才需要在其中一个列中添加一个对话框,它完全可以将其从流中取出.问题是,由于容器上有"溢出:隐藏",因此当对话溢出时对话被切断.

除了将对话框放在容器元素之外,还有什么方法可以通过CSS显示它吗？

这是一个展示我所提到的内容的小例子.

<style>
.container { overflow: hidden; margin-top: 30px }
.col { 
    float: left;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    border-right: 1px solid black;
    width: 100px;
    background-color: grey;
}
.col.third { border-right: none }

#div-a { position: relative }
#div-b {
    position: absolute;
    background-color: red;
    width: 35px;
    height: 350px;
    bottom: 0;
    right: 0;
    margin: 5px;
    border: 2px solid black;
}
</style>

<div class="container">
    <div class="col first">
        <p style="height: 100px">One</p>
    </div>
    <div class="col second">
        <p style="height: 300px">Two</p>
        <div id="div-a">
            <!-- this gets cut off by the "overflow: hidden" on div.container -->
            <div id="div-b">
                Foo
            </div>
        </div>
    </div>
    <div class="col third">
        <p style="height: 200px">Three</p>
    </div>
</div>

你看到div#div-b它在div.container元素溢出时在顶部被切断了.

Answer 1

不幸的是，如果不将对话带到容器元素之外，您想要做的事情是不可能的。

最好的选择是使对话框元素成为容器的同级元素并以这种方式定位它。