哪些css属性会创建新的层叠上下文

$\text{position: relative}$ / $\text{absolute}$ / $\text{fixed}$ / $\text{sticky}$ 且 $\text{z-index}$ 不为 $\text{auto}$，或者设置了 $\text{opacity}<1$、$\text{transform}$

这些因素会让这个盒子创建新的堆叠上下文

如何记忆：

• position的上面属性都是脱离了正常文档流
• capacity会使盒子半透明化，为了隔离这种影响会创建一个新的上下文。
• transform也跟opacity一样。