CSS

Question

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

EXAMPLE ON 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>

Answer 1

这是与 z-index 的交易。

Z-index 在正常 DOM 流中是相对于其父对象（最终是相对于 Window 对象）的。然而，绝对定位的对象从正常的 DOM 流中移除，因此，Z-Index 是相对于自身的 - 而不是 Window 对象。

在你的情况下，你没有为你的父菜单设置位置，所以它会被自动分配 position:static 不能被 z-indexed。

将以下内容添加到您的父菜单应该允许您对子菜单进行 z-index 以使其位于其上方。

position:relative;
z-index:1;

Answer 2

问题是当您设置 z-index: 999 时，您在 .menu_wrapper 上 establishing a stacking context。建立堆叠上下文后，您不能将后代元素放在祖先元素的后面。

从 .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:

Updated Example

.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;
}

CSS - Z-index 不适用于相对和绝对位置

CSS - Z-index is not working with positions relative and absolute

html

z-index