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

我有一个固定位置的 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 的末尾被截断。

我正在想办法解决这个问题。

最佳答案

你有: