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;

这导致内容滚动，我在其中一个内容中有以下框，如此<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之外。我想知道它为什么不这样做。

请注意，这是一个为什么问题，我想知道为什么我的代码无法正常工作，而不是如何使其工作，至少在不知道为什么的情况下。

谢谢。

Answer 1

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

以下是我的想法：元素的Z指数值就像纸张。您可以使用z-index对元素的子元素进行排序，但它们不能保留其父元素 - 它们始终位于父元素所在的两个工作表之间。

Answer 2

Z-index用于覆盖其他scop的show div的其他层。

你必须从滚动条中写出<div class="abs"></div>。

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

2 个答案: