标题上的 Z 索引不起作用，尽管所有 div 都已设置位置

Question

我有一个简单的反应组件。标题有一个

div

，页面的其余部分有一个

div

。标题的

div

具有固定位置，正文的

div

位置设置为相对。我将标题的

z-index

设置为高于正文，但它仍然重叠，我不知道为什么。

这是我的 JSX 代码：

    <>
      <div className="header">
        <h3>Name</h3>
        <button>Logout</button>
      </div>
      <div id="host" className="container-top">
        <h1>Start a Game</h1>
        <p>
          Select a Game Below or{" "}
          <Link id="create-game-link" to="/create-quiz">
            Create your Own!
          </Link>
        </p>
        {renderAction()}
      </div>
    </>  

这是我的 CSS 代码：

.container-top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    position: fixed;
    top: 0;
    z-index: 15;
    display: flex;
    width: 100%;
    border-bottom: solid 1px #3a5a40;
    box-shadow: 5px 2px 5px #333333; 
}

#host {
    position: relative;
    margin-top: 75px;
    z-index: -1;
    height: 5000px;
}

Answer 1

首先你必须将

<div className="header">

更改为

<div class="header">