Z-index不适用于flex元素？

Question

我正在尝试使用两列，一个是可以扩展并与另一列重叠的菜单。但我使用flex元素来包装这些列，我的菜单扩展后面另一个元素，即使有更大的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>

请参阅？扩展时，我希望我的菜单与页面的其余部分重叠。我怎么能这样做？

Answer 1

Flex项目只是flex-container的直接子项。

Flex项目尊重z-index订单，但您不会将z-index应用于flex-items，而是应用于其后代。

来自w3c flexbox spec：

  

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

因此，为了实现此目的，您应该将更大的z-index应用于您的第一个弹性项目。演示：

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

Answer 2

z-index属性仅影响位置值不是静态（默认值）的元素，或者是弹性项目（display: flex或display: inline-flex的直接子项）。

在您的案例中，z-index有两种选择：

1. 将z-index设置为第一个.maincolumn，这是一个flexbox项目：

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

＆＃13;
＆＃13;
.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;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

或

1. 将position: relative设为nav：

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

＆＃13;
＆＃13;
.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;}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;