CSSを使用している固定ヘッダー

-1

私は自分のウェブサイトの上部にヘッダーを修正しようとしていますが、私はposition：fixedを使用しています。ヘッダーが左にシフトしており、ページの残りのコンテンツが上がっています。私はz-indexを試していますが、まだヘッダが左側にパディングされています。だれでも解決策を見つけるのに助けてください。CSSを使用している固定ヘッダー

おかげ

<body> 
<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
(now some list there)

.header_area{} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

出典

2016-07-23 niharika Singhal

試し：マージントップから、上マージンからは、特定の位置 – Vaibhav

追加しよう：

position: fixed; 
top:0; left:0; right:0;

出典

2016-07-23 20:08:09 Arthur

こんにちはを取得する属性、それは適切な場所にヘッダをシフトしますが、ページの内容は上にまだあります。 –

コンテンツタグに 'margin-top：{header-height} px'を追加してください – Arthur

ありがとうございました –

-1

はこの

<div class="header_area "> 
<div class=" header "> 
<div class="logo floatleft"> 
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/> 
</div> 
<div class="mainmenu floatright "> 
<nav class="main-navigation pull-right hidden-xs hidden-sm"> 
</nav> 
    </div> 
    </div>

をお試しください

.header_area{ 
height:400px; 
} 
.header 
{ 
    position: fixed; 
    z-index:1000; 
    padding: 10px 0; 
    background-color:red; 
    top:0px; 
    left:0px; 
    width:100%; 
    margin: 0 auto; 
    transition: all 1.3s ease 0s; 
    -moz-transition: all 1.3s ease 0s; 
    -webkit-transition: all 1.3s ease 0s; 
    -o-transition: all 1.3s ease 0s; 
    -ms-transition: all 1.3s ease 0s; 

} 
body{ 
    padding: 20px 10px; 
    font-family: sans-serif, open-sans; 
    font-size:14px;line-height:20px;color:#414141; 
} 
nav.main-navigation { 
    position: relative; 
    z-index: 9999; 
    font-family: bebasregular; 
}

出典

2016-07-23 20:12:21

CSSを使用している固定ヘッダー

答えて

関連する問題