避免元素在“溢出：隐藏”元素内时被切断答案

【问题标题】：Avoid an Element from being cut off when they are inside a "overflow: hidden" element避免元素在“溢出：隐藏”元素内时被切断
【发布时间】：2009-03-06 10:23:22
【问题描述】：

我正在使用page 中概述的等高 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 元素中溢出时在顶部被截断。

【问题讨论】：

标签： html css

【解决方案1】：

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

最好的办法是让对话框元素成为容器的同级元素并以这种方式定位。

【讨论】：

【解决方案2】：

不幸的是，没有......我认为没有办法绕过溢出：用绝对位置隐藏。您可以尝试使用 position: fixed，但如果使用它，您将不会在完全相同的条件下进行定位。

【讨论】：

【解决方案3】：

一种选择是将溢出：隐藏容器的内容放入子容器（可能是子 div）。然后，使子容器与容器的尺寸相匹配，并将溢出：隐藏从容器移动到子容器。

然后，您可以使对话框成为容器的子容器（子容器的兄弟），它现在将存在于没有溢出：隐藏的元素中。

我没有对此进行测试，从容器中删除溢出：隐藏可能会破坏您的设计。如果是这种情况，我建议像其他人一样将对话框完全移出容器。如果您无法选择将对话框的代码放在其他任何地方，这甚至可以通过 Javascript 完成。（当您需要显示对话框时，Javascript 可以使对话框成为 BODY 或其他标记的子级）

【讨论】：