哪些CSS属性创建堆叠上下文？

Question

我正在研究堆叠上下文并使用创建堆叠上下文的属性进行一些测试.

我做了几次测试,发现除了z-index当然,以下属性还会创建堆叠上下文:

• transform除了none;
• opacity除了1;
• 并且perspective.

是否有其他属性应用堆叠上下文？

Answer 1

以下一个或多个场景将导致元素为其后代建立自己的堆栈上下文¹:

• 根元素始终包含根堆叠上下文.这就是为什么你可以开始排列元素而不必先放置根元素.任何尚未参与本地堆叠上下文的元素(由以下任何其他方案生成)都将参与根堆叠上下文.

• 设置为定位元素z-index以外的任何内容auto(即不具有position该元素的元素static).

  • 请注意,此行为将被更改为元素,position: fixed以便它们始终建立堆栈上下文,而不管它们的z-index值如何.一些浏览器已经开始采用这种行为,但是这种改变还没有反映在CSS2.1或新的CSS定位布局模块中,所以现在依赖这种行为可能并不明智.

    我的另一个答案探讨了这种行为的变化,而这又是本文和CSSWG电话会议记录的一部分.

  • 另一个例外是flex项.z-index在弹性项目上设置将始终使其建立堆叠上下文,即使它未定位.

• 设置opacity为小于1.

• 转换元素:

  • 设置transform为除以外的任何内容none.

  • 设置transform-style为preserve-3d.

  • 设置perspective为除以外的任何内容none.

• 创建CSS区:设置flow-from比其他任何none一个元素,其上content比其他任何东西normal.

• 在分页媒体中,每个页边距框都会建立自己的堆叠上下文.

• 在滤镜效果中,设置filter为除以外的任何内容none.

• 在合成和混合中,设置isolation为isolate.

• 在将更改时,设置will-change为任何非初始值将创建堆叠上下文的属性.

请注意,块格式化上下文与堆叠上下文不同; 事实上,它们是两个完全独立的(虽然不是相互排斥的)概念.

¹ _{这不包括伪堆叠上下文,这是一个非正式术语,简单地指的是在定位方面表现得像独立堆叠上下文的事物,但实际上参与其父堆叠上下文.}