z-index是否指定未定位的弹性物料的堆叠水平? [英] Does z-index specify the stack level of a non-positioned flex item?

问题描述

在CSS 2.1中， z-index 仅适用定位元素，并指定两个不同的内容:

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

但是 Flexbox 这样说:

弹性项目的绘制与内联完全相同阻止 [CSS21] ， 除了使用 order 修改的文档顺序代替 原始文档顺序和 z-index 值除了auto以外，创建一个 即使 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> 

此行为定义在某处吗?

解决方案

CSS工作组:

CSSWG无法想到建立弹性项目的充分理由 伪堆叠上下文，因此我们决定将它们相同 作为块和表单元格元素的方式.

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

更多信息:

• [css3-flexbox]绘画顺序
• [css3-flexbox]自动绘制柔性项目吗?
• [css3-positioning] z-index和伪堆叠上下文
• [css3-flexbox] [css-ALL]应该-index是否可以在弹性商品上使用?

---

尽管不是直接回答这个问题，但以下 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 only applies to positioned elements, and specifies two different things:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a stacking context.

But Flexbox says this:

Flex items paint exactly the same as inline blocks [CSS21], 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.

Then, unlike CSS2.1, setting z-index to some integer on a non-positioned flex item creates a stacking context.

However, I don't see defined anywhere which should be the stack level of this stacking context.

A similar case is opacity, which can also create establish stacking contexts on non-positioned elements. But in this case the stack level is properly specified to be 0:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0 and opacity: 1.

In my opinion these options are reasonable:

• The stack level is the value specified in z-index
• The stack level is 0
• The flex item wraps its descendants in a stacking context so that they are painted together, but the flex item itself is painted as a normal in-flow non-positioned elements (as if it didn't establish an stacking context).

According to the following test, both Firefox and Chrome do the first option.

.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>

Is this behavior defined somewhere?

解决方案

CSS Working Group:

The CSSWG couldn't think of a good reason to make flex items establish pseudo-stacking contexts, so we have resolved to treat them the same way as block and table cell elements.

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

More information:

• [css3-flexbox] Painting order
• [css3-flexbox] Paint flex items atomically?
• [css3-positioning] z-index and pseudo-stacking contexts
• [css3-flexbox][css-ALL] Should z-index Just Work on flex items?

---

Also, although not a direct answer to the question, the following W3C Editor's Drafts provide strong hints as to where CSS is going with z-index and stacking contexts.

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

It's interesting to note that z-index, as currently defined in the CSS Positioned 3 Editor's Draft, applies only to positioned elements. This is no different than CSS 2.1. Yet grid items and flex items can both create stacking contexts with z-index, even when position is static.

这篇关于z-index是否指定未定位的弹性物料的堆叠水平?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！