z-index
仅适用于定位元素,并指定两个不同的东西:
但是Flexbox说:
07002 paint exactly the same as inline blocks 07003,
except that 07004-modified document order is used in place of
raw document order,and 07005 values other thanauto
create a
stacking context even if 07006 isstatic
.
然后,与CSS2.1不同,在非定位的flex项目上将z-index设置为某个整数会创建一个堆叠上下文。
但是,我没有看到应该是堆叠上下文的堆栈级别的任何位置。
类似的情况是opacity
,它也可以在非定位元素上创建建立堆叠上下文。但是在这种情况下,堆栈级别被正确地指定为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 withz-index: 0
andopacity: 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>
这个行为是否定义在某处?
解决方法
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: 07000
更多信息:
> [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?
而且,虽然不是问题的直接答案,但以下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
有趣的是注意到,当前在CSS Positioned 3 Editor’s Draft中定义的z-index仅适用于定位元素。这与CSS 2.1没有什么不同。然而grid items和flex items都可以使用z-index创建堆栈上下文,即使位置是静态的。