HTML，CSS：标题出现在其他内容的后面

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

（背景：灰色仅用于临时目的）

Answer 2

更改标头选择器，如下所示：

"select count(e) > 0 from Entity e where..."

它在工作。