Html Z索引在滚动框内不起作用

大家看一下我的代码，下面是HTML代码：

<div id="container">
    <div class="dialog">
        <div class="preScroll">
            <div class="header">header</div>
            <div class="scroller">
                <div>
                    <ul>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li><span>Label</span></li>
                        <li id="dropDown_open"><span>Click me!</span><div class="abs"></div></li>
                    </ul>
                </div>
            </div>
            <div class="footer">footer</div>
        </div>
    </div>
</div>

查看我如何将以下css添加到.scroller类中：

overflow: auto;

这会导致内容被滚动，我是如何在其中一个li中显示以下框的，就像这样

，当您将鼠标悬停在上方时，单击我，该框将显示，现在，该框具有以下样式：

#container .dialog .scroller .abs {
    position: absolute;
    display: none;
    top: 120%;
    width: 150px;
    height: 200px;
    background: red;
    z-index: 9999;
}

#container .dialog .scroller #dropDown_open > span:hover ~ div.abs {
    display:block;
}

现在请注意.abs的z-index:9999，尽管如此，它还是出现在

.scroller

div中，为什么会这样，我教过.abs div将重叠并显示在.scroller div之外。我想知道为什么它不这么做

请注意，这是一个为什么的问题，我想知道为什么我的代码不工作，而不是如何使它工作，至少不是不知道为什么

---

多谢各位

Z索引取决于父容器。所以你的.abs上的z指数基本上没有影响。阅读：了解更多信息；）

我是这样想的：

---

元素上的Z索引值类似于一张纸。您可以使用z索引对元素的子元素进行排序，但它们不能离开父元素-它们始终位于两张图纸之间，父元素位于其中。

z索引用于将覆盖其他scop中的其他而非显示div的图层

---

您必须从滚动条中写入

。

因为容器具有您需要的相对位置？@ketan，呵呵不，我希望它重叠整个滚动框！通过使用z索引，您不能将子项置于父项之上

#container .dialog .scroller .abs {
    position: absolute;
    display: none;
    top: 120%;
    width: 150px;
    height: 200px;
    background: red;
    z-index: 9999;
}

#container .dialog .scroller #dropDown_open > span:hover ~ div.abs {
    display:block;
}