z-index是否指定了未定位的Flex项的堆栈级别？

Question

在CSS 2.1中,z-index仅适用于定位元素,并指定两个不同的东西:

1. 当前堆叠上下文中框的堆栈级别.
2. 框是否建立堆叠上下文.

但Flexbox说:

柔性物品油漆完全一样直列块[CSS21] ,不同的是order改性的文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使position是static.

然后,与CSS2.1不同,z-index在未定位的flex项上设置为某个整数会创建堆叠上下文.

但是,我没有看到任何应该是此堆叠上下文的堆栈级别的定义.

类似的情况是opacity,它也可以在非定位元素上创建堆叠上下文.但在这种情况下,堆栈级别被正确指定为0:

如果未定位不透明度小于1的元素,则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层,如果它是带有z-index: 0和的定位元素,则使用该堆叠顺序opacity: 1.

在我看来,这些选择是合理的:

• 堆栈级别是指定的值 z-index
• 堆栈级别为0
• flex项目将其后代包装在堆叠上下文中,以便它们被绘制在一起,但是flex项目本身被绘制为正常的流入非定位元素(就好像它没有建立堆叠上下文一样).

根据以下测试,Firefox和Chrome都是第一个选择.

.container {
  display: flex;
  padding-left: 20px;
}
.item {
  padding: 20px;
  background: #ffa;
  align-self: flex-start;
  margin-left: -20px;
}
.item:nth-child(even) {
  background: #aff;
  margin-top: 40px;
}
.za::after{ content: 'z-index: auto'; }
.z0 { z-index: 0; } .z0::after{ content: 'z-index: 0'; }
.z1 { z-index: 1; } .z1::after{ content: 'z-index: 1'; }
.z-1 { z-index: -1; } .z-1::after{ content: 'z-index: -1'; }

<div class="container">
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
</div>

这种行为是在某处定义的吗？

Answer 1

CSS工作组:

CSSWG无法想到使flex项目建立伪堆叠上下文的充分理由,因此我们决定以与块和表格单元格相同的方式对待它们.

_{来源:https://lists.w3.org/Archives/Public/www-style/2012Jul/0382.html}

更多信息:

• [css3-flexbox]绘画顺序
• [css3-flexbox]原子地绘制flex项目？
• [css3-positioning] z-index和伪堆叠上下文
• [css3-flexbox] [css-ALL] z-index应该只适用于flex项吗？

此外,虽然不是问题的直接答案,但以下W3C编辑器草案提供了关于CSS的使用位置z-index和堆叠上下文的强有力提示.

11.分层演示 ~ CSS定位布局模块3级

12.详细的堆叠上下文 ~ CSS定位布局模块3级

4.3.Z轴订购:z-index属性 ~ CSS网格布局模块1级

值得注意的是z-index,正如CSS定位3编辑器草案中当前定义的那样,仅适用于定位元素.这与CSS 2.1没有什么不同.然而,网格项和弹性项都可以创建堆叠上下文z-index,即使它position是static.