溢出：隐藏没有正确隐藏绝对定位的元素答案

【问题标题】：overflow:hidden is not correctly hiding absolutely positioned elements溢出：隐藏没有正确隐藏绝对定位的元素
【发布时间】：2014-08-17 22:50:44
【问题描述】：

我正在创建一个下拉设置框，在其中我希望能够有下拉子菜单来分组设置。子菜单应该向下滑动，为此，我使用 jQuery 向下滑动包含它们的 div。然而，我立即出现的绝对定位切换，尽管它们位于设置为overflow: hidden 的 div 之外，如下图所示：

这是我的 html 中的一个示例：

<div id="settings-content" class="hover-content">
  <div class="setting-expandable">
    Panels to display<span class="expand-button pointer">+</span>
    <div class="hide expand-content">
        <label class="pointer">YouTube - LinusTechTips
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.ltt"><span class="toggle"></span>
        </label>
        <br/>
        <label class="pointer">YouTube - TechQuickie
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.tq"><span class="toggle"></span>
        </label>
        <br/>
        <label class="pointer">YouTube - Channel Superfun
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.csf"><span class="toggle"></span>
        </label>
        <br/>
    </div>
  </div>
</div>

还有我的 CSS：

.toggle {
    height: 13px;
    margin: 3px 0;
    position: absolute;
    right: 10px;
    width: 27px;
}
.toggle::after {
    background - color: red;
    content: "";
    height: 13px;
    position: absolute;
    right: 0;
    width: 13px;
    transition: 0.2s linear all;
}
.expand-content {
    margin-left: 10px;
    margin-top:3px;
    overflow:hidden
}
.hover-content {
    position: absolute;
    width: 500px;
    right: 15px;
    background-color: inherit;
    top: -15px;
    border: 2px black solid;
    border-radius: 14px;
    padding: 5px;
    display: block;
}

JS本质上是$("...").click(function(){ $("...").slideUp(); });

如果我故意将它们放在内容区域之外，并依次将溢出隐藏在每个东西上，它只会在影响#settings-content容器div时隐藏。

我在这里做了一个小提琴：http://jsfiddle.net/S4DSh/1/

我将非常感谢有关如何解决此问题的一些指导，因为目前它看起来很奇怪。

提前致谢！

【问题讨论】：

查看 CSS z-indexing
@Adam 如果我设置z-index: -1 它隐藏在背景颜色后面（为简单起见，我没有将它包含在 jsfiddle 中），无论如何它都无济于事。 z-index: 1 没有区别。

标签： javascript jquery html css

【解决方案1】：

将其容器设置为position:relative 和overflow:hidden。

.setting-expandable {
    position:relative;
    overflow:hidden;
}

DEMO

您也可以将position:relative; 添加到.expand-content，但这看起来会稍微移动切换开关。

另见this answer，基本上是同一个问题。

【讨论】：

【解决方案2】：

您要做的是更改 div 的 z-index。您应该将较低的 z-index 值放在您想要留在后面的东西上，并将较高的 z-index 值放在您想要放在前面的东西上。如果我错了，请纠正我，但是，值 -1 将在身体后面。您可以输入任何值，例如 999

#DivInTheBack{
    z-index:12;
}
#DivInTheFront{
    z-index:13;
}

你应该看看 w3schools 参考：http://www.w3schools.com/cssref/pr_pos_z-index.asp

【讨论】：