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

Question

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

我进行了一些测试，发现除了z-index，当然，以下属性还创建了堆栈上下文：

• transform除了none;
• opacity除了1;
• 和perspective。

还有其他应用堆栈上下文的属性吗？

Answer 1

以下一种或多种情况将导致元素为其后代建立自己的堆栈上下文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到其任何非初始值将创建一个堆叠内容的属性。

注意，块格式化上下文与堆栈上下文不同；实际上，它们是两个完全独立的（尽管不是互斥的）概念。