Flexbox，z-index& position：static：为什么它不工作？ [英] Flexbox, z-index & position: static: Why isn't it working?
问题描述
根据flexbox规范：
According to flexbox specification:
.. Flex项目Z顺序...和
z-index除
以外的值auto创建堆叠即使位置是static。
所以，我认为 z-index / opacity 应该像flexbox一样工作，但当我把它应用到这个HTML / CSS它不工作（我的目标是 .header 在 .core 创建两个图层）：
So, I thought z-index / opacity is supposed to work as usual with flexbox but when I apply it to this HTML/CSS it doesn't work (my goal was to put .header on top of .core creating two layers):
.header {
opacity: 0.5;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerLeft {
z-index: inherit;
background-color: blue;
text-align: right;
align-self: stretch;
flex: 2 1 250px;
}
.headerCenter {
z-index: inherit;
background-color: red;
text-align: right;
align-self: stretch;
flex: 1 1 175px;
}
.headerRight {
z-index: inherit;
background-color: green;
text-align: right;
align-self: stretch;
flex: 1 1 100px;
}
.core {
z-index: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.coreItem {
align-self: stretch;
flex: 1 1 400px;
}
<body>
<div class="header">
<div class="headerLeft">Left</div>
<div class="headerCenter">Center</div>
<div class="headerRight">Right</div>
</div>
<div class="core">
<div class="coreItem">Core1</div>
<div class="coreItem">Core2</div>
<div class="coreItem">Core3</div>
<div class="coreItem">Core4</div>
<div class="coreItem">Core5</div>
<div class="coreItem">Core6</div>
</div>
</body>
flex属性上的前缀。
I used proper prefixes on flex properties. I don't understand why it's not working.
推荐答案
像你在你的问题中写的，元素不要
Like you wrote in your question, elements do not need to be positioned for z-index to work in flexbox. Flex items can participate in a z-index stacking order even with position: static (which is not true for other box models where z-index only works on positioned elements).
Flex项目绘制与内联块完全相同，但
除外， order 修改的文档顺序替换原始文档
顺序和 z-index 值 auto 创建堆叠上下文
，即使位置是 static 。 / p>
Flex items paint exactly the same as inline blocks, 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 在您的代码中不工作是 div.header 和 div.core 不是flex项目。他们是 body 的子级，但 body 不是弹性容器。
The reason z-index isn't working in your code is that div.header and div.core are not flex items. They are children of body, but body is not a flex container.
为了 z-index 在这里工作，你需要应用 display：flex 到正文。
In order for z-index to work here, you'll need to apply display: flex to body.
将此代码添加到您的代码中：
Add this to your code:
body {
display: flex;
flex-direction: column;
}
更多详情： http://stackoverflow.com/a/35772825/3597276
这篇关于Flexbox，z-index& position：static：为什么它不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
