HTML、CSS : Header appears behind the other content

Question

我正在尝试做一个固定的标题，但它隐藏在屏幕上其余内容的后面。我已尝试更改 z-index，但它不起作用。

我的 html 文件如下所示:

body {
  margin: 0;
}
.header {
  width: 100%;
  height: 88px;
  position: fixed;
  left: 0;
  top: 0;
}
.content {
  margin-top: 100px;
}
.first-sec {
  width: 100%;
  height: 608px;
  background: black;
  opacity: 0.8;
}
.second-sec {
  width: 100%;
  height: 89px;
}
.third-sec {
  width: 100%;
  height: 665px;
}
.fourth-sec {
  width: 100%;
  height: 317px;
  background: rgba(40, 40, 40, 0.85);
}

<div class="header">
  <h1>HEADER</h1>
</div>
<div class="content">
  <div class="first-sec">
  </div>
  <div class="second-sec">
  </div>
  <div class="third-sec">
  </div>
  <div class="fourth-sec">
  </div>
</div>

我做错了什么？

Answer 1

你可以试试这个

.header{
z-index:2 !important;
    width:100%;
    height:88px;
    position: fixed;
    left:0;
    top:0;
    background: gray;
}

(背景:灰色仅供临时使用)