保持固定菜单栏不重叠

我多多少少设计一种原型网站。就像其他网站一样，我试图设置一个固定位置的菜单栏，但不会覆盖我放在屏幕上的所有其他内容。所以，从本质上讲，我希望在另一个盒子（网页主体）的顶部有一个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

保持固定菜单栏不重叠

回答

相关问题