使用css flexbox

Question

我正在尝试在其父元素后面添加一个子元素。

两者都有position: absolute和z-index（父z-index为3，而子-1}，但孩子仍然出现在父母面前

我在这里重新创建了这个问题（单击缺失的图像以显示应该出现在导航后面的子菜单）： 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对齐，但不能放在它下面。

如果您删除z-index:3，则无法建立堆叠上下文，然后孩子的z-index:-1会将其放在导航栏后面。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;