z-index与flex元素不兼容？

Question

我想要两列布局，其中一列是可以展开并覆盖另一列的菜单。但我使用了一个弹性元素来包裹这些列，我的菜单会在另一个元素之后展开，即使它有更大的z-index。

渲染结果如下：

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
  z-index: 1;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}

<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Title</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

看吧？我希望我的菜单在展开时覆盖在页面的其余部分之上。我该怎么做？

- F. Morival

Answer 1

z-index属性仅影响具有除静态（默认值）之外的position值或为flex项（display: flex或display: inline-flex的直接子代）的元素。

有两种选项可以使z-index在您的情况下生效：

1. Set the z-index to the 1st .maincolumn, which is a flexbox item:

   .maincolumn:first-child {
     z-index: 1;
   }
   

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

.maincolumn:first-child {
  z-index: 1;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}

<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Titre</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

或

2. Set position: relative to nav:

   nav {
      position: relative;
      height: 100%;
      width: 8em;
      background-color: black;
      z-index: 1;
    }
   

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

nav {
  position: relative;
  height: 100%;
  width: 8em;
  background-color: black;
  z-index: 1;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}

<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Titre</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

- Ori Drori

---

允许在 flex 容器上使用 z-index 的简单方法是将导航包装在一个相对定位的容器中，然后将其下方的所有内容都包装在一个 <main> 容器中。

wxyz content

nav{position: relative;z-index:9999}main{position: relative; z-index:1} div{display: flex} - tradesouthwest

Answer 2

Flex项目只能是flex容器的直接子元素。

Flex项目尊重z-index顺序，但您将z-index应用于其后代而非flex项目。

从w3c flexbox spec：

Flex项目的绘制方式与行内块CSS21完全相同，只是使用order修改后的文档顺序代替原始文档顺序，并且除了auto之外的z-index值即使position为static也会创建堆叠上下文。

因此，要使此工作正常，您应该将更大的z-index应用于第一个flex项目。演示：

.main {
  font-family: 'Open Sans', Helvetica, sans-serif;
  display: flex;
  background-color: #99baef;
}

.maincolumn:first-child {
  z-index: 1;
}

nav {
  height: 100%;
  width: 8em;
  background-color: black;
}

.navbox {
  box-sizing: border-box;
  background-color: black;
  color: white;
  height: 4em;
  width: 100%;
  text-align: center;
  line-height: 4em;
  border-top: 1px dotted #99baef;
  transition: all 1s;
}

.navbox:hover {
  width: 130%;
  border-top: none;
  background-color: #4a77c4;
  color: black;
}

.container {
  padding: 1em;
}

a {text-decoration: inherit;}

<div class="main">
  <div class="maincolumn">
    <nav>
      <a href="">
        <div class="navbox">
          Nav 1
        </div>
      </a>
      <a href="">
        <div class="navbox">
          Nav 2
        </div>
      </a>
    </nav>
  </div>
  <div class="maincolumn">
    <div class="container">
      <h2>Title</h2>
      <p>This is a text.</p>
    </div>
  </div>
</div>

- Vadim Ovchinnikov