Flexbox、z-index &位置:静态:为什么不工作? [英] Flexbox, z-index & position: static: Why isn't it working?
问题描述
根据 flexbox 规范:
<块引用>...4.3.Flex Item Z-Ordering ,... 和 z-index 值，而不是auto 即使 position 是 static 也会创建一个堆叠上下文.
所以，我认为 z-index/opacity 应该像往常一样与 flexbox 一起工作，但是当我将它应用到这个 HTML/CSS 时它不起作用(我的目标是将 .header 放在 .core 之上，创建两个层):
.header {不透明度:0.5；z-索引:2；显示:弹性；对齐项目:居中；justify-content: flex-end;}.headerLeft {z-index:继承；背景颜色:蓝色；文本对齐:右；对齐自我:伸展；弹性:2 1 250px；}.headerCenter {z-index:继承；背景颜色:红色；文本对齐:右；对齐自我:伸展；弹性:1 1 175px；}.headerRight {z-index:继承；背景颜色:绿色；文本对齐:右；对齐自我:伸展；弹性:1 1 100px；}.核 {z-索引:0；显示:弹性；flex-flow:行包装；对齐项目:居中；justify-content:空间环绕；}.coreItem {对齐自我:伸展；弹性:1 1 400px；}<div class="header"><div class="headerLeft">Left</div><div class="headerCenter">Center</div><div class="headerRight">Right</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>
我在 flex 属性上使用了正确的前缀.我不明白为什么它不起作用.
就像你在问题中写的那样，元素不需要被定位以便 z-index在弹性容器中工作.
Flex 项目即使使用 position: static 也可以参与 z-index 堆叠顺序，这对于其他 CSS 框模型(Grid 除外)来说是不正确的，其中 z-index 仅适用于定位元素.
Flex 项目的绘制与内联块完全相同，除了使用 order 修改的文档顺序代替原始文档order 和 z-index 值而不是 auto 创建堆叠上下文即使 position 是 static.
z-index 在您的代码中不起作用的原因是 div.header 和 div.core 不是弹性项目.它们是 body 的孩子，但 body 不是弹性容器.
为了让 z-index 在这里工作，你需要将 display: flex 应用到 body.
将此添加到您的代码中:
body {显示:弹性；弹性方向:列；}更多详情:https://stackoverflow.com/a/35772825/3597276
According to flexbox specification:
..4.3. Flex Item Z-Ordering ,... and
z-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
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>
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 a flex container.
Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned elements.
Flex items paint exactly the same as inline blocks, except that
order-modified document order is used in place of raw document order, andz-indexvalues other thanautocreate a stacking context even ifpositionisstatic.
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.
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;
}
More details: https://stackoverflow.com/a/35772825/3597276
这篇关于Flexbox、z-index &位置:静态:为什么不工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
