当向下滚动时,修复了页面其余部分覆盖的导航栏

时间:2017-05-20 14:47:53

标签: html css

我想在我的网站顶部有一个看起来像导航栏的元素:

enter image description here

它应该像导航栏一样修复。但是,只要用户向下滚动,它就会在内容的其余部分消失:

enter image description here

我试过类似的东西,其中#title元素是" navbar":

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="title" class="center-align">
        <h1>Title</h1>
        <h2>Subtitle</h2>
    </div>

    <div id="showcase" class="center-align">
    </div>
</body>

<style>
#title {
    position: fixed;
    width: 100%;
    height: 50vh;
    z-index: -1;
}

#showcase {
    margin-top: 50vh;
    height: 75vh;
    background-color: #212121;
}
</style>

</html>

但是这不起作用,#title似乎也受到50vh margin-top的影响(您可以通过将其z-index设置为1而不是-1来看到它。)< / p>

4 个答案:

答案 0 :(得分:0)

top: 0添加到标题ID。像:

#title {
    position: fixed;
    width: 100%;
    height: 50vh;
    z-index: 1;
    top: 0;
}

答案 1 :(得分:0)

尝试使用以下css更改您的样式。我为测试目的做了一些改动。

    #title {
    position: fixed;
    width: 100%;
    height: 50vh;
    z-index: -1;
    background: red ; 
    top:0;
}

#showcase {
    margin-top: 50vh;
    height: 275vh;
    background-color: #212121;
}

希望有所帮助

答案 2 :(得分:0)

无需使用z-index

  

默认情况下,兄弟姐妹按照从下到上的顺序堆叠,因此第一个孩子将在底部,最后一个孩子在顶部。见这里的例子:

兄弟z-index示例:

&#13;
&#13;
http
&#13;
.div1 {
  width: 100px;
  height: 100px;
  background: red;
}

.div2 {
  margin-top: -50px;
  margin-left: 50px;
  width: 100px;
  height: 100px;
  background: green;
}

.div3 {
  margin-top: -50px;
  margin-left: 100px;
  width: 100px;
  height: 100px;
  background: aqua;
}
&#13;
&#13;
&#13;

解决您的问题:

&#13;
&#13;
<div class="div1">
  div1
</div>
<div class="div2">
  div2
</div>
<div class="div3">
  div3
</div>
&#13;
#title {
  width: 100%;
  height: 100px;
  text-align: center;
  position: fixed;
  top: 0;
}

#showcase {
  margin-top: 120px;
  height: 90vh;
  background: black;
}
&#13;
&#13;
&#13;

答案 3 :(得分:0)

这是一个使用固定navabr和普通div的示例,用于具有margin-top的内容:

&#13;
&#13;
body {
  margin:0;
  height:100%;
}

.navbar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  background-color: lightblue;
  z-index:-1;
}

.content {
width: 100%;
  float: left;
  height: 1000px;
  margin-top: 50px;
  background-color: red;
}
&#13;
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="navbar">
      Navbar
    </div>
    <div class="content">
      Content
    </div>
</body>
</html>
&#13;
&#13;
&#13;