目前正在做一个网络元素,我想在我的网站上设置一个粘性部分
这可能总是可用的。我尝试了不同的东西,但没有任何效果。

我的结构如下

<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 进行启动。

herehere

关于HTML/CSS 使页眉和导航粘在页面顶部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16980302/

10-09 18:34