小编典典

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

css

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

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

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

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


阅读 388

收藏
2020-05-16

共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到其任何非初始值将创建一个堆叠内容的属性。

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

2020-05-16