Question

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

这是我的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/

我非常感谢我应该如何解决这个问题，因为它目前看起来很奇怪。

提前致谢！

Answer 1

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

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

DEMO

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

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

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

overflow：hidden未正确隐藏绝对定位的元素

2 个答案: