为什么 z-index 在这里不起作用？

Question

我希望 webdsn-drop 位于#navbuttons-container 后面，但我无法让它工作。出于某种原因，#navbuttons-container div 在它后面 #webdsn-drop 并且我希望这些层反转。

body {
  background-color: #0f0f0f;
  width: 980px;
  margin: 0 auto;
}


/*-----NAVIGATION-BAR-----*/

#navbuttons-container {
  background-color: #303030;
  width: 100%;
  overflow: auto;
  position: fixed;
  left: 0px;
  top: 0px;
  overflow: hidden;
  padding: 0;
  z-index: 10;
}

#web-name {
  color: #f7f7f7;
  font-family: 'calibri light';
  padding: 4.5px 0 0 10px;
  float: left;
  font-size: 30px;
  margin: 0 auto;
  letter-spacing: 10px;
}

#navigation {
  max-width: 980px;
  min-width: 854px;
  margin: 0 auto;
}

.navbuttons {
  float: right;
  font-size: 20px;
  font-family: 'calibri';
  display: flex;
}

.navbuttons a {
  color: #f7f7f7;
  text-decoration: none;
  padding: 12.5px 20px;
  background-color: #303030;
  transition: background-color 0.5s ease;
}

.navbuttons a:hover {
  background-color: #5b5b5b;
  transition: background-color 0.5s ease;
}

#webdsn-drop {
  position: fixed;
  left: 0px;
  background-color: red;
  width: 100%;
  z-index: 9;
}

<div id="navbuttons-container">
  <div id="navigation">

    <h1 id="web-name">PORTFOLIO</h1>

    <div class="navbuttons-container">

      <div class="navbuttons">
        <a href="">Logo Design</a>
        <div id="webdsn-drop">
          <h1 class="subname">
            <h1>
        </div>
      </div>

      <div class="navbuttons">
        <a href="">Art & Misc.</a>
        <div id="webdsn-drop">
          <h1 class="subname">
            <h1>
        </div>
      </div>

      <div class="navbuttons">
        <a href="">Posters & Flyers</a>
        <div id="webdsn-drop">
          <h1 class="subname">
            <h1>
        </div>
      </div>

      <div id="webdsn-menu" class="navbuttons">
        <a href="">Website Design</a>
        <div id="webdsn-drop">
          <h1 class="subname">WEBSITE DESIGN
            <h1>
        </div>
      </div>

    </div>
  </div>
</div>

Answer 1

将 z-index: -1; 应用到 .webdsn-drop - 因为它是 #navbuttons-container 的子元素，您需要使用负 z-index 才能将其移到父元素后面。

为什么 z-index 在这里不起作用？

Why isn't z-index working here?

html

css

navigation

z-index

css-position