Z-index 不适用于绝对定位元素（尽管移除了不透明度等）

Question

在阅读了this 后，我在与桌面断点上不会出现在页面内容上方的绝对定位子菜单作斗争后，我删除了文章中标识的所有有问题的 CSS，但无济于事。尽管应用了 z-index 的绝对位置，以下 HTML 中的子菜单不会出现在页面内容上方。任何对此问题有进一步想法的人，请告诉我——我很困惑。

<nav id="nav-main" role="navigation">
  <ul class="site-nav site-nav__main">
    <li class="nav__menuitem nav__menuitem--main first level1"><a class="nav__menulink nav__menulink--main transition" href="my-link">my-link</a></li>
    <li id="subNav__parent" class="nav__menuitem nav__menuitem--parent transition clearfix level1">SubNav Toggle Label<span class="subNav__toggle">+</span>
      <ul class="subNav">
        <li class="nav__menuitem nav__menuitem--subnav first level2">
          <a class="nav__menulink nav__menulink--main transition" href="my-link2">my-link2</a>
        </li>
        <li class="nav__menuitem nav__menuitem--subnav last level2">
          <a class="nav__menulink nav__menulink--main transition" href="my-link3">my-link3</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

.site-nav {
  margin: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  list-style-type: none;
  transition: .2s ease-out; /*related to a different transition; not relevant to the issue being 
    posted about*/
  transform: translateY(0%);
}

// SUBNAV

.nav__menuitem--parent { /*this is the click element used to open / close the sub-menu
  position: relative;
  cursor: pointer;
}

.subNav {
  position: absolute;
  z-index: 10;
  margin: 1rem auto 0 auto;
  padding: 1rem 0;
  width: 250px;
  visibility: 0;
}

.subNav.open {
  transition-property: visibility, max-height;
  transition-duration: .5s;
  transition-timing-function: ease-out;
  max-height: 500px; /* approximate max height */
  visibility: 0;
}

Answer 1

我实施的解决方案并没有解决这样一个事实，即编写的 HTML 和 CSS 应该可以工作，但没有，但是 FWIW，我对 header 元素进行了 z 索引并将其定位在页面内容的包装元素之上。由于子菜单是全局导航的子菜单，而全局导航又是标题元素的子菜单，因此它的堆栈顺序等同于标题的每个 z-index 默认值 auto。

Answer 2

指定位置时：绝对；该项目将相对于其父项定位。您需要指定 top:0 或类似内容来覆盖它。

这里有一个快速的小提琴来说明

.parent-nav {
  background-color:red;
  position:absolute;
  top:0;
  width:100%;
}

.sub-nav-parent {
  background-color:blue;
  position:relative;
}

/* 10px below sub nav parent */
.sub-nav-child {
  background-color:cyan;
  position:absolute;
  top:10;
  left:0;
  z-index:99;
  width:100%;
}

<div class="page-content">
<h1>
  This is my page content
</h1>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
</div>

<div class="parent-nav">
<ul class="sub-nav-parent">
  <li>Sub Nav Parent</li>
  <li>
    <ul class="sub-nav-child">
        <li>Child 1</li>
        <li>Child 2</li>
    </ul>
  </li>
</ul>
</div>