保持固定菜單欄不重疊

我多多少少設計一種原型網站。就像其他網站一樣，我試圖設置一個固定位置的菜單欄，但不會覆蓋我放在屏幕上的所有其他內容。所以，從本質上講，我希望在另一個盒子（網頁主體）的頂部有一個100％寬的盒子（菜單欄），它放在頁腳上。

我的代碼如下所示：

<header> 
    <nav> 
    <ul> 
     <a href="#"><li>Name</li></a> 
     ...More list elements... 
    </ul> 
    </nav> 
</header> 

header{ 
    background-color:white; 
    width:100%; 
    padding:15px; 
    border-bottom:1px solid black; 
    position:fixed; 
    margin-top:-25px; 

nav ul li{ 
    list-style-type:none; 
    display:inline-block; 
    padding:10px; 
    margin-right:100px; 
    font-family:Script MT, /*To make sure the font is displayable for you*/ Arial; 
    font-size:20px;

每當我在文檔的其餘部分東西（我已經把標籤和標籤的菜單欄），菜單欄重疊，所以它的不可見。

所以問題是：在世界上我如何讓我的菜單欄保持固定但不重疊其他所有內容？

來源

2014-11-03 uto998

你需要以抵消你的頭，這意味着你需要給它一個固定高度的高度內容：

HTML：

<header> 
    ... 
</header> 

<div class="content"> 
</div>

CSS：

header{ 
    ... 
    height:50px; 
} 

.content{ 
    margin-top:50px  
}

來源

2014-11-03 21:41:48

工作正常！謝謝。 – uto998 2014-11-03 21:52:39

嘗試使用z-index並將其設置爲ex。 9999：

header { 
    background-color:white; 
    width:100%; 
    padding:15px; 
    border-bottom:1px solid black; 
    position:fixed; 
    margin-top:-25px; 
    z-index: 9999; 
}

這將使頭中的所有其他元素的前面，除非它們具有較高的Z-索引號。

來源

2014-11-03 21:29:25 TheYaXxE

我試過了，但內容與標題重疊。再次，不是我想要的。 – uto998 2014-11-03 21:31:08

你可以試着用你所有的代碼做一個小提琴嗎？使它更容易處理:) – TheYaXxE 2014-11-03 21:34:49

它在這裏：http://jsfiddle.net/doe0tdvz/1/ – uto998 2014-11-03 21:46:19

如果我明白你在問什麼，就把padding-top放在body標籤上，該標籤等於菜單欄的高度。這樣，當你在頁面頂部時，浮動菜單不會與任何東西重疊。

來源

2014-11-03 21:35:26 chazsolo

對我來說，當我這樣做時，它會推動整個菜單欄。 – uto998 2014-11-03 21:42:31

保持固定菜單欄不重疊

回答

相關問題