1

画像載せれないのでリンク貼っておきます

http://i.stack.imgur.com/LxO1e.png

私はこのウェブサイトを持っています.PHPと他のすべてのものは機能しています. 問題は、上にスクロールして下にある他のものを見ると、上にスクロールされた要素がヘッダーの下ではなく上に移動することです。これを解決するにはどうすればよいですか？

ここに HTML を投稿できないようです。4 つのスペースをインデントしてみましたが、HTML では機能しないため、代わりに次のサイトをご覧ください: pageboost.comze.com

これは、下ではなく上に行くメインのcssです

.inmain
{
width:95%;
height:100%;
left:20px;
top:42px;
position:relative;
}

ここにヘッダーのcssがあります

.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
}
4

2 に答える 2

3

これらの位置のいずれかでz-indexを定義する必要がありますrelative,absolute or fixed。

たとえば、彼のように書く：

.header{
 position:fixed;
 z-index:1;
}
于 2012-05-21T05:03:00.173 に答える
0

位置を定義したHeaderクラスまたは Id にz-index値を定義するだけです。z-index値を指定すると、スムーズに機能することを願っています.....

更新された回答

ヘッダー クラスにz-index値を指定しましたが、正常に動作するようになりました。確認してください.....

HTML

<div class="header"></div>
<div class="inmain">afdadfasf</div>

CSS

.header
{
background-color:#ffd800;
width:100%;
height:42px;
position:fixed;
left:0px;
top:0px;
-webkit-box-shadow: 0 5px 6px -6px black;
-moz-box-shadow: 0 5px 6px -6px black;
    z-index:1;
}

.inmain
{
width:95%;
height:100%;
left:20px;
top:35px;
position:relative;
}

理解を深めるために、ライブデモを参照してください:- http://jsfiddle.net/X8vpg/6/

于 2012-05-21T05:06:31.607 に答える