Flexbox，z-index和位置：静态：为什么不起作用？
根据flexbox规范：
..4.3。Flex Item Z-Ordering，…和
z-index其他值（auto即使position是，也不会
创建堆叠上下文）static。
因此，我认为z-index/ opacity应该与flexbox一样正常工作，但是当我将它应用于此HTML /
CSS时它不起作用（我的目标是放在创建两层.header之上.core）：
.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属性上使用了适当的前缀。我不明白为什么它不起作用。
问题答案：
就像你在你的问题中写道，元素 并不 需要被定位为z-index在柔性容器的工作。
z-index即使使用position: static，Flex项目也可以参与堆叠顺序，而其他CSS盒子模型（网格除外）则z-index仅适用于放置元素，而CSS盒子模型则不是这样。
4.3。 弹性项目Z排序
Flex项的绘制与内联块完全相同，不同之处在于，
order使用-
修改后的文档顺序代替原始文档顺序，以及创建堆叠上下文z-index以外的其他值（auto即使position是）static。
究其原因z-index是不是在你的代码的工作是div.header和div.core不挠的项目。它们是的子级body，但body不是flex容器。
为了让z-index在这里工作，你需要申请display: flex到body。
将此添加到您的代码：
body {
display: flex;
flex-direction: column;
}
-
z-index总是达不到效果，对层这块总是无法用z-index搞定，求指教
-
问题内容： 因此，我有此标记，并且在其内部设置了图像顶部的蓝色叠加层。 如果我不制作 ，标题文本将隐藏在蓝色层的后面…好像它的用法在模仿 为什么会这样呢？ 问题答案： 您需要参考规范，更确切地说是绘画顺序，以了解何时打印每一层。 在没有元素的情况下，未放置元素并将在步骤（4）中进行打印： 对于其所有 流入的，未定位的， 块级的树状后代：如果元素是块，列表项或其他等效块： 然后在步骤（8）中打印定位
-
本文向大家介绍z-index有时不起作用的原因是什么？怎么解决？相关面试题，主要包含被问及z-index有时不起作用的原因是什么？怎么解决？时的应答技巧和注意事项，需要的朋友参考一下 1、可能是没有设置position 解决：设置position为relative,absolute,fixed 2、设置了浮动 解决：清除浮动 3、父元素position为relative 解决：设置为absolut
-
问题内容： // Ignore z-index if position is set to a value where z-index is ignored by the browser // This makes behavior of this function consistent across browsers // WebKit always returns auto if the el
-
问题内容： 我有几列使用flex给出相等的宽度。每个都包含标签，我希望这些图像显示尺寸。 如本演示中所示，图像没有调整大小。这是为什么？ 问题答案： 从规格： 该属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。 关键术语是： 根据其使用的高度和宽度安装到盒子中 图像将被替换，而不是其容器。并且由其使用的高度和宽度确定的框与图像本身有关，而不与容器有关。 因此，报废容器并使图像本
-
问题内容： 我希望外圈在圆圈后面，但是当我尝试使用它时，它不起作用。什么也没做 我做了2个环，一个环在圆圈的顶部，没有顶部，另一个环在圆圈的后面，我只是无法移动，我不知道为什么。 问题答案： 您需要删除转换并将其替换为其他内容，然后才能将伪元素移到后面： 正如我们在规范中所读到的： 以树顺序的所有 position ，opacity或 transform子代 ，分为以下类别： 所有以“ z-ind