html - Z-index 在滚动框内不起作用

Question

大家看看我的代码，下面是 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>

FIDDLE HEER

CSS 代码在这里::

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    background: yellow;
}

#container .dialog {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    background: white;
}

#container .dialog .preScroll {
    position: relative;
    width: 100%;
    height: 100%;
}

#container .dialog .header,
#container .dialog .footer {
    height: 25px;
}

#container .dialog .scroller {
    height: calc(100% - 50px);
    width: 100%;
    background: blue;
    overflow: auto;
}

#container .dialog .scroller #dropDown_open {
    position: relative;
}

#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;
}

ul {
    list-style: none;
}

ul li {
    font-size: 16px;
}

ul li:last-child {
    background: #FFF;
    padding: 5px;
    border: 1px solid black;
    border-radius: 5px;
}

看看我是如何将以下 css 添加到 .scroller 类中的:

overflow: auto;

这会导致内容滚动，我如何在其中一个 li 中包含以下框，就像这样 <div class="abs"></div> ，当你鼠标悬停在上面，点击我，这个框会显示，现在，这个框有以下样式:

#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 之外。我想知道为什么它不这样做。

请注意，这是一个 WHY 问题，我想知道为什么我的代码不起作用，而不是如何让它起作用，至少在不知道 WHY 的情况下不会。

谢谢。

Answer 1

Z-index 取决于父容器。所以你的 .abs 上的 z-index 基本上没有效果。阅读:https://css-tricks.com/almanac/properties/z/z-index/获取更多信息；)

这是我的想象:元素上的 Z-index 值就像一张纸。您可以使用 z-index 对元素的子元素进行排序，但它们不能离开它们的父元素 - 它们总是位于两个工作表之间，父元素位于其中。