解决您的问题：

Question

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

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

我试过类似的东西，其中#title元素是＆＃34; navbar＆＃34;：

<!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>

Answer 1

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

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

Answer 2

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

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

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

希望有所帮助

Answer 3

无需使用z-index

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

兄弟z-index示例：

＆＃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;

<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;

Answer 4

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

＆＃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;

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

4 个答案:

兄弟z-index示例：

解决您的问题：