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

前端之家收集整理的这篇文章主要介绍了哪些CSS属性创建堆叠上下文?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究大约 stacking contexts并做一些测试与创建堆叠上下文的属性

我做了几个测试,发现,除了z-index,当然,以下属性也创建了一个堆栈上下文:

>变换非零;
>不透明度1;
>和透视。

是否有其他属性应用堆叠上下文?

解决方法

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

>根元素始终保存根堆叠上下文。这就是为什么你可以开始排列元素,而不必先定位根元素。任何尚未参与本地堆栈上下文(由以下任何其他场景生成)的元素将参与根堆栈上下文。
>将z-index设置为定位的元素(即,位置不是静态的元素)上除auto之外的任何东西。

>请注意,此行为预定为要更改为具有position:fixed的元素,以便它们将始终建立堆栈上下文,而不考虑其z-index值。一些浏览器已经开始采用这种行为,但是更改没有反映在CSS2.1或新的CSS Positioned Layout Module,因此,现在依赖这种行为可能不明智。

这种行为的变化在another answer of mine中被探讨,后者又链接this articlethis set of CSSWG telecon minutes
>另一个例外是使用flex item.在flex项目上设置z-index将总是导致它建立一个堆栈上下文,即使它没有被定位。

>将opacity设置为小于1的值。
> Transforming元素:

>将transform设置为none以外的任何值。
>将transform-style设置为preserve-3d。
>将perspective设置为none以外的任何值。

>创建一个CSS region:在内容不是正常的元素上将flow-from设置为none以外的任何内容
>在paged media,每个page-margin box建立自己的堆叠上下文。
>在filter effects中,将filter设置为none以外的任何值。
>在compositing and blending,将isolation设置为隔离。
>在will change中,将will-change设置为其任何非初始值将创建堆叠上下文的属性

注意,block formatting context与堆栈上下文不同;事实上,它们是两个完全独立的(虽然不是相互排斥的)概念。

1这不包括伪堆叠上下文,一个非正式术语,简单地参考things that behave like independent stacking contexts相对于定位,但实际参与其父堆叠上下文。

原文链接:https://www.f2er.com/css/221621.html

猜你在找的CSS相关文章