Css Z索引不适用于绝对定位元素（尽管已移除不透明度等）

在阅读了一个绝对定位的子菜单（它不会出现在桌面断点上的页面内容上方）之后，我剥离了文章中标识的所有有问题的CSS，但没有任何效果。下面HTML中的子菜单将不会出现在页面内容上方，尽管应用了z索引的绝对位置。任何对这个问题有进一步想法的人，请告诉我——我很困惑

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

subNav切换标签+








.场地导航{
保证金：0；
左：1rem；
右侧填充：1rem；
列表样式类型：无；
转换：.2s缓解；/*与其他转换相关；与正在处理的问题无关
张贴*/
转化：translateY（0%）；
}
//亚纳夫
.nav_u_menuitem--parent{/*这是用于打开/关闭子菜单的click元素
位置：相对位置；
光标：指针；
}
.subNav{
位置：绝对位置；
z指数：10；
保证金：1rem自动0自动；
填充：1rem0；
宽度：250px；
能见度：0；
}
.subNav.open{
过渡属性：可见性、最大高度；
过渡时间：.5s；
过渡定时功能：缓解；
最大高度：500px；/*近似最大高度*/
能见度：0；
}

指定位置时：绝对；项目将相对于其父项进行定位。您需要指定top:0或类似名称以覆盖此选项

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

。父导航{
背景色：红色；
位置：绝对位置；
排名：0；
宽度：100%；
}
.副导航父级{
背景颜色：蓝色；
位置：相对位置；
}
/*低于子导航父级10px*/
.副导航儿童{
背景色：青色；
位置：绝对位置；
排名前10名；
左：0；
z指数：99；
宽度：100%；
}

这是我的网页内容
页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文

页面正文页面正文


子导航父级


儿童1
儿童2

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

我认为这并不能解决这个问题。需要明确的是，当打开状态处于活动状态时，菜单将显示在相对于其父菜单应该显示的位置，并且是可见的。堆叠问题与html中稍后出现的页面内容有关。如果是这种情况，那么如果我理解正确，以后的内容必须具有更高的z索引。我已经更新了代码片段，以说明nav位于页面主体divYes之上，这是有意义的，但它没有-没有为页面内容的包装应用z索引，这是html中标题之后的内容。正如我发布的解决方案中提到的，我最终按照堆栈顺序向上移动了标题。这就解决了这个问题。你的CSS中是否真的有

//SUBNAV

，因为这是无效的CSS注释语法，可能会影响结果CSS是使用SCSS生成的，而这种格式是有效的。我加入评论只是为了在CSS目标之间进行划分。谢谢