javascript - 溢出 :hidden is not correctly hiding absolutely positioned elements

Question

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

这是我的 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 时隐藏。

我在这里为它做了一个 fiddle :http://jsfiddle.net/S4DSh/1/

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

提前致谢!

Answer 1

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

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

DEMO

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

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