我正在研究stacking contexts并使用创建堆叠上下文的属性进行一些测试。
我做了几次测试，发现除了z-index之外，以下属性还会创建堆叠上下文：
transform; 之外的none
除了opacity; 1
perspective。是否有其他属性应用堆叠上下文？
答案 0 :(得分：64)
以下一个或多个场景将导致元素为其后代建立自己的堆叠上下文 1 ：
根元素始终包含根堆叠上下文。这就是为什么你可以开始排列元素而不必先放置根元素。任何尚未参与本地堆叠上下文的元素（由以下任何其他方案生成）都将参与根堆叠上下文。
将z-index设置为auto以外的任何位置（即position不是static的元素）。
请注意，对于具有position: fixed的元素，此行为将被更改为无论其z-index值如何，它们始终会建立堆叠上下文。有些浏览器已经开始采用这种行为，但是这种改变还没有反映在CSS2.1或新的CSS Positioned Layout Module中，所以现在依靠这种行为可能并不明智。
此行为更改在another answer of mine中进行了探讨，后者又链接到this article和this set of CSSWG telecon minutes。
另一个例外是flex item。在弹性项目上设置z-index将始终使其建立堆叠上下文，即使它未定位。
将opacity设置为小于1的任何内容。
Transforming元素：
将transform设为none以外的任何内容。
将transform-style设为preserve-3d。
将perspective设为none以外的任何内容。
在none不是content的元素上创建CSS region：将flow-from设置为normal以外的任何内容。
在paged media中，每个page-margin box都会建立自己的堆叠背景。
在filter effects中，将filter设置为none以外的任何内容。
在compositing and blending中，将isolation设为isolate。
在will change中，将will-change设置为任何非初始值会创建堆叠上下文的属性。
请注意，block formatting context与堆叠上下文不同;事实上，它们是两个完全独立的（虽然不是相互排斥的）概念。
1 这不包括伪堆叠上下文，这是一个非正式术语，只是简单地引用things that behave like independent stacking contexts关于定位，但实际参与在他们的父堆叠上下文中。