嵌套在固定位置的div中绝对定位的div的Z-index

Question

嵌套在固定位置的div中绝对定位的div的Z-index

4

我有一个固定位置的 div（标头），它有一个绝对定位的子 div，我希望它在所有元素的上方（按 z-index 排序），但我似乎无法弄清楚如何做到这一点。具有绝对位置的子 div 的高度大于标头，但不会延伸到其上方。这里是演示。

<!doctype html>
<html lang="en">
<body>
    <div class="container">
        <div class="header">
            <div class="center">
                <div id="pgSearch" class="search-box">
                    <div class="input-results">
                        <p>this should extend over the red part</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="center">
                <p>content</p>

            </div>
        </div>
    </div><!--container-->
</body>
</html>

.container {
    width: 100%;
    height: 100%;
    padding-top: 89px;
    position: relative;
    z-index:10;
    background:red;
}

.header {
    position: fixed;
    height: 89px;
    display: block;
    padding: 0 20px;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow-y: hidden;
    background: green;
    z-index: 500;
}
.search-box {
    width:300px;
    float:left;
    position:relative;
    z-index:501;
}
.search-box .input-results {
    position: absolute;
    top:10px;
    left: 1px;
    width:300px;
    height:300px;
    z-index:9999;
    background: white;
}

我希望的是白色DIV（input-results）能够覆盖在所有元素的顶部，但实际上它被固定的header DIV遮挡了。我已经试图解决这个问题很长时间了，感到非常沮丧。

- Errol Fitzgerald

在 CSS 中，建议使用 * { margin:0; padding:0; } 来规范化每个元素，而不是定义每个元素。 - Muhammad Talha Akbar

2

@AspiringAqib 不建议使用 * 作为选择器。 - Mr Lister

O.o @MrLister 谢谢，这就是我在想为什么所有的网站都不使用它的原因。 - Muhammad Talha Akbar

2个回答

3

你将.header 上的 overflow-y 设置为 hidden。这意味着白色区域被 .header 的高度遮挡了。将其更改为 overflow-y: visible; 即可解决问题。

- Dom Walker

“visible”是默认值，所以最好省略它。 - kapa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nice ass · Accepted Answer

你有:

overflow-y: hidden;

在 .header 中

这意味着任何超出 .header 高度的内容都会被裁剪。如果不需要，请删除该属性。