Question

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

当前堆叠上下文中框的堆栈级别。

框是否建立堆叠上下文。

但Flexbox说：

Flex items绘制与内联块[CSS21]完全相同，除了order - 使用修改后的文档顺序代替原始文档顺序以及auto以外的z-index值创建即使position为static，也会堆叠上下文。

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

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

类似的情况是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无法想出制作弹性项目的充分理由   伪堆叠上下文，所以我们决定对它们进行同样的处理   作为块和表格单元格的方式。

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

更多信息：

此外，尽管不能直接回答这个问题，但以下 W3C编辑器的草稿提供了关于CSS与z-index和堆叠上下文一致的强烈提示。

11. Layered presentation〜CSS Positioned Layout Module Level 3

12. Detailed stacking context〜CSS Positioned Layout Module Level 3

4.3. Z-axis Ordering: the z-index property〜CSS Grid Layout Module Level 1

值得注意的是，z-index目前在CSS Positioned 3 Editor's Draft中定义的z-index仅适用于定位元素。这与CSS 2.1没有什么不同。但grid items和flex items可以使用position创建堆叠上下文，即使static为public static T ConvertFromString<T>(string raw) { return (T)TypeDescriptor.GetConverter(typeof(T)).ConvertFromString(raw); } // Usage var date = ConvertFromString<DateTime>("2015/01/01"); var number = ConvertFromString<int>("2015");也是如此。

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

1 个答案: