哪些CSS属性创build堆栈上下文？

我正在研究堆叠上下文，并使用创build堆栈上下文的属性进行一些testing。

我做了几个testing，发现除了z-index ，下面的属性还创build了一个堆栈上下文：

• none
• opacity不是1 ;
• 和perspective 。

是否有其他属性适用堆栈上下文？

Answer 1

以下一种或多种情况会导致元素为其后代build立自己的堆栈上下文¹ ：

• 根元素始终保存根堆栈上下文。 这就是为什么你可以开始排列元素，而不必首先定位根元素。 任何尚未参与本地堆栈上下文（由以下任何其他场景生成）的元素都将参与根堆栈上下文。

• 将z-index设置为定位元素（即position不是static的元素）以外的其他任何东西。

  • 请注意，对于position: fixed元素，此行为将被更改，使得它们始终会build立堆叠上下文，而不考虑其z-index值。 一些浏览器已经开始采用这种行为，但是这种改变并没有反映在CSS2.1或者新的CSS定位布局模块中 ，所以现在依靠这种行为可能并不明智。

    我的另一个答案探讨了这种行为上的变化，而这个答案又与本文和这组CSSWG电话会议logging相关 。

  • 另一个例外是一个弹性项目 。 在flex项目上设置z-index将始终使它build立一个堆栈上下文，即使它没有被定位。

• 将opacity设置为小于1 。

• 转换元素：

  • 将transform设置transform none 。

  • 将transform-style设置为preserve-3d 。

  • 将perspective设置为没有任何东西。

• 创build一个CSS区域 ：在content不是normal的元素上将flow-from设置flow-from none 。

• 在分页媒体中 ，每个页面页边距框都build立了自己的堆叠上下文。

• 在滤镜效果中 ，将filter设置为除none以外的none 。

• 在合成和混合中 ，设置isolation来isolate 。

• 在将改变 ，设置will-change到一个属性，其任何非初始值将创build一个堆栈上下文。

请注意， 块格式化上下文与堆叠上下文不同; 事实上，它们是两个完全独立的（尽pipe不是相互排斥的）概念。

---

¹ _{这不包括伪堆栈上下文 ，这是一个非正式术语，它指的是像定位方面的独立堆栈上下文那样的行为 ，但是实际上参与了它们的父堆栈上下文。}