目前正在做一个网络元素,我想在我的网站上设置一个粘性部分
这可能总是可用的。我尝试了不同的东西,但没有任何效果。
我的结构如下
<body>
<wrap>
<header></header>
<nav></nav>
<container></container>
</wrap>
<footer></footer>
</body>
如果你更喜欢一个方案,这是这个链接:
http://s21.postimg.org/79tp8wu5z/structure_page.png
所以我想让我的标题导航和背景(应用于正文背景)粘在页面顶部。
我知道我需要使用固定的相对位置,但除了背景外没有任何作用。
这是我的CSS:
body {
background: url(img/bg.jpg) no-repeat center center;
background-attachment: fixed;
background-position: top;
}
.wrap {
width: 960px;
margin: 0 auto;
}
#header {
height: 121px;
position: relative;
}
#footer {
height: 40px;
background-color: #146992;
position: relative;
}
.container {
position:relative;
}
#menu {
position:relative;
height: 45px;
}
谢谢你的帮助。
最佳答案
您尚未固定 nav
栏的位置。
尝试使用
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
或者您可以使用 Twitter Bootstrap 进行启动。
看 here 和 here 。
关于HTML/CSS 使页眉和导航粘在页面顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16980302/