Child 后面 parent 和 css flexbox

Question

我正在尝试在其 parent 元素后面添加一个 child 元素。

都有position: absolute和z-index（parentz-index是3，child是-1），但是 child 仍然出现在 parent.

的前面

我在这里重现了这个问题（点击丢失的图片显示应该出现在导航后面的子菜单）： https://jsfiddle.net/fr2gaq6d/

nav {
    position:absolute;
    z-index:3;
}

#nav_areas {
    display:none;
    position:absolute;
    top:0.5em;
    left:0;
    right:0;
    background-color:#fff;
    z-index: -1;
    color:#212121;
}

我做错了什么？

Answer 1

当您在导航上使用 z-index:3 时，它会建立一个堆叠上下文。

该堆叠上下文中的元素只能z-aligned在其中，但不能放在它下面。

如果删除 z-index:3，它不会建立堆叠上下文，然后 child 的 z-index:-1 会将其放在导航后面。

document.getElementById('menu_toggle').addEventListener("click", function() {
  menuToggle();
});
function menuToggle() {
  if (document.getElementById('nav_areas').style.display == 'none' || document.getElementById('nav_areas').style.display == '') {
    changeNavAreasVisibility(true);
  } else {
    changeNavAreasVisibility(false);
  }
}
function changeNavAreasVisibility(isVisible) {
  if (isVisible) {
    document.getElementById('nav_areas').style.display = 'initial';
  } else {
    document.getElementById('nav_areas').style.display = 'none';
  }
}

nav {
  background-color: #9C27B0;
  text-transform: uppercase;
  text-align: center;
  left: 0;
  right: 0;
  display: flex;
  color: #fff;
}
#menu_toggle {
  height: 1em;
  cursor: pointer;
  order: 3;
  display: inline;
}
nav {
  position: absolute;
  /*z-index:3;*/
}
#nav_areas {
  display: none;
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: -1;
  color: #212121;
}

<nav>
  <div>
    ASDF ASDF ASDF ASDF ASDF
  </div>
  <ul id="nav_areas">
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
    <li>ITEM 4</li>
  </ul>
  <ul id="nav_etc">
    <li id="nav_etc_search">
      <input type="search" placeholder="Search...">
    </li>
  </ul>
  <img id="menu_toggle" src="menu.svg" alt="menu">
</nav>

Child 后面 parent 和 css flexbox

Child behind parent with css flexbox

html

css

z-index