60

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

我做了几个测试，发现除了 之外z-index，当然，以下属性也创建了一个堆叠上下文：

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

是否还有其他应用堆叠上下文的属性？

4

1 回答 1

83

以下一种或多种情况会导致元素为其后代建立自己的堆叠上下文1 ：

  • 根元素始终拥有一个根堆叠上下文。这就是为什么您无需先定位根元素即可开始排列元素的原因。任何尚未参与本地堆叠上下文（由以下任何其他场景生成）的元素将改为参与根堆叠上下文。

  • 设置为定位元素z-index以外auto的任何内容（即带有positionthat is not的元素static）。

    • 请注意，此行为将针对具有以下内容的元素进行更改，以position: fixed使它们始终建立堆叠上下文，而不管其z-index值如何。一些浏览器已经开始采用这种行为，但是这种变化还没有反映在 CSS2.1 或新的CSS Positioned Layout Module中，所以现在依赖这种行为可能并不明智。

      在我的另一个答案中探讨了这种行为变化，该答案又链接到本文和这组 CSSWG 电话会议记录。

    • 另一个例外是弹性项目和网格项目。设置z-index总是会导致它建立一个堆叠上下文，即使它没有被定位。

  • 设置opacity为小于1.

  • 转换元素：

  • 创建CSS 区域：设置flow-from为除none.contentnormal

  • 在分页媒体中，每个页边距框都建立了自己的堆叠上下文。

  • 在滤镜效果中，设置filter为none.

  • 在合成和混合中，设置isolation为isolate和设置mix-blend-mode为不同于normal

  • In will change , 设置will-change为任何非初始值都会创建堆叠上下文的属性。

  • 在屏蔽中，将clip-path/设置mask为 以外的值none。

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

1 这不包括伪堆叠上下文，这是一个非正式术语，仅指在定位方面表现得像独立堆叠上下文但实际上参与其父堆叠上下文的事物。

于 2013-04-22T13:27:57.487 回答