固定位置で設定されたヘッダーと呼ばれるdivがあります。問題は、ページをスクロールすると、ページのコンテンツがヘッダーの後ろに表示されることです(ヘッダーは透明です)。
私はcssについてよく知っていますが、これを理解することはできません。オーバーフローを非表示に設定しようとしましたが、機能しないことはわかっていました(機能しませんでした)。
これは説明するのが非常に難しいので、私は最善を尽くしました。
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
これが問題のスクリーンショットです。
これだけ遅れて来ましたが、将来誰かがこれに遭遇した場合のために、ここにあなたの修正があります。
あなたのCSSコード:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
あなたのHTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
これにより、サイトに完全に一致するヘッダーが提供され、上部にフロートします。メインコンテンツはヘッダーが表示されない状態でスクロールし、ヘッダーを通過すると非表示になります。 .bottom-wrapper padding-topは、ヘッダーラッパーのコンテンツの高さでなければなりません。
乾杯!
あなたはおそらくz-index
を探しています。これにより、ページ上の要素の垂直方向の順序を指定できるため、z-index: 10
を持つ要素は、z-index: 5
を持つ要素の上に(視覚的に)浮かんでいます。
コンテンツをz-index: 5
にして、機能するかどうかを確認します。
私は同様の問題を抱えていて、私のケースの解決策を見つけました。フルスクリーンの背景画像を使用しているか、単色(白を含む)を使用しているかにかかわらず適用されます。
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
これにより、透明な固定ヘッダーがあるページ全体の画像のように見え、本文のコンテンツがスクロールすると、ヘッダーの後ろに隠れます。画像がシームレスに表示されます。
単色の背景でも同じことができますが、おそらく、もっと簡単だったでしょう。
2つの注意事項:ヘッダーには一定の高さがあり、FFとChromeでのみテストしました。
します#header
設定された高さがありますか?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
IEでもこれが機能しないことを確認してください...
ヘッダーの下のコンテンツdivの位置を修正し、コンテンツdivのオーバーフロー-オーバーフローを行います。
これは答えるのが遅いと思います。しかし、後で、誰かがこれが役立つだろう外観を持っています。
ヘッダークラスに背景を追加するだけ
これがコードです->
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:999;
background-color:#FFFFFF;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
<!DOCTYPE html>
<html>
<body>
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
</body>
</html>
私も同様の問題に直面しましたが、単純なダーティハックを使用して解決しました
1)画像フォルダに白い画像がある
2)次に、このCSSをヘッダースタイルで追加します
z-index:999; //スクロールするコンテンツの上にヘッダーを作成します
background-image:url( "../ images/white.png"); //スクロールするコンテンツを非表示にする
3)出来た!!