为什么 z 索引在这里不起作用？

Question

我希望WebDSN-Drop在＃Navbuttons-container后面，但我无法正常工作。由于某种原因，＃navbuttons-containerdiv在其背后＃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才能将其移动到父母后面。