2016-07-23 59 views
-1

我正在嘗試修復頂部的頁眉,但我在使用位置: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; 
} 
+0

嘗試:保證金從-top和margin-從頂部屬性來獲取特定的定位 – Vaibhav

回答

0

嘗試添加:

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

你好,移動頭到合適的位置,但頁面的內容仍然在頂部。 –

+0

在您的內容標籤上添加一個「margin-top:{header-height} px' – Arthur

+0

感謝它的工作 –

-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; 
}