我正在学习有关层叠上下文,并使用创建层叠上下文的属性进行一些测试。
我进行了几次测试,并发现除了z-index
之外,当以下属性具有以下特定值时也会创建一个层叠上下文:
transform
值不为none
;opacity
值不为1
;- 还有
perspective
属性。
是否还有其他属性会创建层叠上下文?
以下情况之一将导致元素为其后代建立自己的堆叠上下文1:
根元素始终具有根堆叠上下文。这就是为什么您可以开始排列元素而不必先定位根元素的原因。任何不参与本地堆叠上下文(由以下任何一种情况生成)的元素都将参与根堆叠上下文。
在已定位的元素(即具有非静态position
属性的元素)上将z-index
设置为除auto
以外的任何值。
请注意,此行为预计将更改为对具有position: fixed
的元素进行堆叠,以便它们始终建立堆叠上下文,无论其z-index
值如何。一些浏览器已经开始采用此行为,但是CSS2.1或新的CSS Positioned Layout Module尚未反映出此更改,因此现在可能不明智地依赖于此行为。
我在另一个答案中探讨了这种行为变化,该答案转而链接到本文和这组CSSWG电话会议记录。
将元素的opacity
设置为小于1
的任何值。
转换元素:
将transform
设置为除none
以外的任何值。
将transform-style
设置为preserve-3d
。
将perspective
设置为除none
以外的任何值。
在合成和混合中,将isolation
设置为isolate
,并将mix-blend-mode
设置为与normal
不同的值
在will-change中,将will-change
设置为其任何非初始值都会创建堆叠上下文的属性。
在遮罩中,使用除none
以外的值设置clip-path
/mask
。
1 这不包括伪层叠上下文,这是一个非正式的术语,仅指行为类似于独立堆叠上下文相对于定位,但实际上参与其父堆叠上下文。
position: fixed
可以在 Chrom(e|ium) 上创建一个堆叠上下文!在chrome://flags
中有一个专门的标志。 - Ry-z-index
需要一个非静态的位置来创建堆叠上下文。我相信 OP 已经意识到了这一点。或者你是指position:fixed
单独创建堆叠上下文而不需要z-index
吗? - Fabrício Matté=]
我会去看看的。 - Fabrício Matté