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（输入结果）位于所有内容之上，但它在已修复的标题 div 的末尾切断。

我正在失去理智试图弄清楚这一点。

4

2 回答 2

11

You have:

overflow-y: hidden;

in .header

That means that any content that exceeds the height of .header will be cut off. Remove that property if you don't need it

于 2013-01-21T15:50:46.580 回答
3

您将 .header 上的溢出-y 设置为隐藏。这意味着白色区域被 .header 的高度所覆盖。将此更改为溢出-y：可见；那应该可以解决您的问题。

于 2013-01-21T15:55:21.050 回答