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

Question

在与一个不会出现在桌面断点页面内容上方的绝对定位子菜单作斗争之后阅读了这篇文章，我删除了文章中确定的所有有问题的 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;
}

标签： csscss-positionz-index

Answer 1

指定位置时：绝对；该项目将相对于其父项定位。您需要指定 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>