Question

我有一个固定位置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（输入结果）在所有内容之上，而是在标题div的末尾切断，这是固定的。

我正在试图解决这个问题。

Answer 1

你有：

overflow-y: hidden;

.header

中的

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

Answer 2

你将.header上的overflow-y设置为隐藏。这意味着白色区域被.header的高度所占据。将其更改为overflow-y：visible;这应该可以解决你的问题。

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

2 个答案: