4

私は固定位置div（ヘッダー）を持っています。これには、すべての（z-indexに関して）一番上になりたい絶対位置を持つ子divがありますが、これを行う方法がわからないようです。絶対位置の子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）をすべての上に置くことですが、代わりに、固定されているヘッダーdivの終わりで途切れます。

私はこれを理解しようとして頭がおかしくなっています。

4

2 に答える 2

11

あなたが持っている：

overflow-y: hidden;

の.header

つまり、.headerの高さを超えるコンテンツはすべて切り取られます。不要な場合は、そのプロパティを削除してください

于 2013-01-21T15:50:46.580 に答える
3

.headerのoverflow-yが非表示に設定されています。これは、白い領域が.headerの高さによってコピーされていることを意味します。これをoverflow-y：visible;に変更します。そしてそれはあなたの問題を解決するはずです。

于 2013-01-21T15:55:21.050 に答える