Z-index不适用于flex元素吗? [英] Z-index doesn't work with flex elements?

问题描述

我正在尝试有两列，一列是可以扩展并重叠另一列的菜单.但是我使用了一个flex元素来包装这些列，并且即使在更大的z-index情况下，菜单也会在后面后面展开.

I'm trying to have two columns, one being a menu which can expand and overlap the other column. But I used a flex element to wrap these columns and my menu expands behind the other element, even with a greater 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>

看到了吗?扩展时，我希望菜单与页面的其余部分重叠.我该怎么办?

See? I want my menu to overlap the rest of my page when expanding. How can I do that?

推荐答案

弹性项目仅是弹性容器的直接子代.

Flex items are only direct children of flex-container.

弹性项目遵循z-index的顺序，但是您将z-index应用于的不是弹性项目，而是其后代.

Flex items respect z-index order, but you are applying z-index not to flex-items but to their descendants.

来自 w3c flexbox规范:

弹性项目的绘制与内联块完全相同 CSS21 ，但 z-index 值不是

Flex items paint exactly the same as inline blocks CSS21, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

因此，要执行此操作，应将更大的z-index应用于您的第一个弹性项目.演示:

So for this to work you should apply greater z-index to your first flex item. Demo:

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

这篇关于Z-index不适用于flex元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！