Z-index on header not working despite all divs having set positions

Question

I have a simple react component. There is a div for the header and a div for the rest of the page. The div for the header has a fixed position and the div for the body has a position set to relative. I set the z-index for the header to be higher than that of the body but it is still being overlapped and I am not sure why.

This is my JSX code:

    <div id="host">
      <div className="header">
      </div>
      <div className="container-top body">
        <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>
    </div>

This is my CSS code:

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

.header {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 5;
    border-bottom: 1px solid #3a5a40;
    box-shadow: 5px 2px 5px #333333;
}

.body {
    position: relative;
    top: 70px;
    height: 2000px;
}

Answer 1

Try setting the background color in the header, if it is transparent other divs are visible.