CSS固定ヘッダートップ：0;

Question

サイト上で作業しています。そのため、<header></header>とナビゲーションがサイトの上部に残るようにしています。私は解決できないようないくつかの問題でこれを行うことができます。

私が使用しているコードは次のとおりです。

header { 
    background:#000; 
    position:fixed; 
    width: 100%; 
    top: 0; 
} 

は今、私はこのコードを配置したら、<header>タグのあるすべてのものブローかは、「」に該当するともあるかのように下とをスクロールそれを通過する。 <header>の下または外を通って、サイトの残りの部分が落ちたり、スクロールしたりする方法があるかどうか疑問に思っていますか？

私は<header><margin-bottom>にサイトを最初に読み込むときにテキストが表示されるようにスペースを作成しようとしましたが、これはうまくいかないようです。

このソリューションへのリンクはありますか？

Answer 1

本体のヘッダーと余白に少し高さを置いてください。

header { 
    background:#000; 
    position:fixed; 
    width: 100%; 
    top: 0; 
    height: 60px; 
} 

body { 
    margin-top: 60px 
} 

Answer 2

あなたのコンテンツをヘッダとは別にラップすると、padding-top: [height of header]となります。これにより、重複しないようにします。それは、常に内容のtopに来ているよう

Answer 3

は、それはあなたの問題を解決を願って、またmin-height:50pxを与えるheaderにz-index:9999を与える:)

おかげ

header { 
background:#000; 
position:fixed; 
width: 100%; 
min-height:50px; 
padding:50px 10px 5px; 
top: 0; 
left:0px; 
z-index:9999; 
overflow:hidden; 
}