CSS - 使用相对定位和绝对定位时，Z-index无法正常工作

Question

我使用纯CSS3制作了一个下拉菜单，但是其中一个属性（z-index）没有像我预期的那样工作，这是一个非常大的问题，因为下拉列表会在菜单上方弹出。理想情况下，它必须在菜单下方弹出。我已经尝试解决了一整天，但不幸的是无法解决，所以现在请求帮助... 我为问题项制作了不同的背景颜色，以便更清楚地看到我要达到的目标。主要目的是用红色背景的子菜单必须在蓝色背景下面。
P.S. 我已经尝试使用jQuery slideDown/slideUp属性创建此菜单，但它们不像我的示例中的理想滑动效果。它们看起来更像拉伸，而这不是我想要的...

在JSFIDDLE上查看示例

ul {
  list-style-type: none;
}
.menu_wrapper {
  position: relative;
  z-index: 999;
  /* IS NOT WORKING... O_o...*/
  height: 70px;
  width: 600px;
  background-color: blue;
}
.menu li {
  display: inline;
  float: left;
  display: table;
  height: inherit;
  margin: 3px;
  margin-top: 10px;
}
.menu li a {
  display: table-cell;
  font-family: Verdana;
  font-size: 16px;
  color: gold;
  text-align: center;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  background: #05487F;
  transition: .2s ease-in-out;
}
.sub-menu {
  position: absolute;
  z-index: 1;
  /* IS NOT WORKING... O_o...*/
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}
.sub-menu li {
  float: none;
}
.sub-menu li a {
  padding: 5px 15px;
}
.menu li a:hover + .sub-menu {
  margin-top: 40px;
}
.sub-menu:hover {
  margin-top: 40px;
}

<nav class="menu_wrapper">
  <ul class="menu">
    <li><a href="about/index.html">About</a>
    </li>
    <li><a href="news/index.html">News</a>
    </li>
    <li>
      <a href="">PROBLEM HERE<br>(HOVER THIS)</a>
      <ul class="sub-menu">
        <li><a href="">link 1</a>
        </li>
        <li><a href="">link 2</a>
        </li>
        <li><a href="">link 3</a>
        </li>
      </ul>
    </li>
    <li><a href="">Something</a>
    </li>
    <li><a href="">Contacts</a>
    </li>
  </ul>
</nav>

- Tony Montana

Answer 1

问题在于当您设置z-index: 999时，您在.menu_wrapper上建立了一个堆叠上下文。当建立堆叠上下文时，您无法将后代元素定位在祖先元素的后面。

从.menu_wrapper中删除z-index: 999：

.menu_wrapper {
  position: relative;
  /* z-index: 999; << remove */
  height: 70px;
  width: 600px;
  background-color: blue;
}

然后将.sub-menu的z-index从1更改为负数，例如-1：

更新示例

.sub-menu {
  position: absolute;
  z-index: -1;
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}

- Josh Crozier

---

准确来说：当您将position设置为relative或absolute，并将z-index设置为不是auto的值时，即确定了一个堆叠上下文。 - klimat

z-index: -1 是解决方案。 - teenage vampire

Answer 2

以下是关于z-index的解释：

z-index属性是相对于其父元素（最终相对于Window对象）在正常DOM流中的位置。但是，绝对定位的对象被移除了正常的DOM流，因此z-index属性是相对于它本身而不是Window对象。

在你的情况下，你没有为父菜单设置position属性，所以它将自动分配position:static，这不能进行z-index排列。

添加以下内容到你的父菜单应该允许你进行子菜单的z-index排列。

position:relative;
z-index:1;

- Korgrue