我正在研究堆栈上下文,并使用创建堆栈上下文的属性进行一些测试。
我进行了一些测试,发现除了z-index,当然,以下属性还创建了堆栈上下文:
z-index
transform
none
opacity
1
perspective
还有其他应用堆栈上下文的属性吗?
以下一种或多种情况将导致元素为其后代建立自己的堆栈上下文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到其任何非初始值将创建一个堆叠内容的属性。
注意,块格式化上下文与堆栈上下文不同;实际上,它们是两个完全独立的(尽管不是互斥的)概念。