css3-z1,css – z-index是否指定非定位的flex项目的堆栈级别?

在CSS 2.1中,

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

The stack level of the Box in the current stacking context.

Whether the Box establishes a stacking context.

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 than auto create a

stacking context even if 07006 is static.

然后,与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 with z-index: 0 and 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'; }

这个行为是否定义在某处?

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值