特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
z-index
和transform
是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上。事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读。因为阅读完了,你会有所收获的。
堆叠上下文(Stacking Context)
在开始今天的主题之前,先得回忆一下CSS中的Stacking Context(堆叠上下文)。因为只有了解清楚了这个概念,才能更好的了解下面的内容。
任何HTML文档默认的堆叠上下文都是<html>
元素。因此,除非创建新的堆叠上下文。默认情况下,元素的堆叠顺序相对于页面内的其他元素。在一个未做堆叠顺序更换的页面中,其顺序就是根据HTML中的元素出现的先后顺序来决定,先出现的在底下,后出现的在顶部。用数字来表示的话是就1,2,3,4,...,n
这样的顺序。比如下面的示例:
第二个div
做了一个margin-top
的-50px
,可以看到第二个div
遮住了第一个div
。那么怎么才能改变默认的堆叠顺序呢?
先把结论给大家抛出来,在CSS中可以使用z-index
和transform
可以改变元素的堆叠顺序。但也可能会导致一些奇怪的情况,比如具有较大的z-index
的元素并不总是位于具有较低z-index
元素的上方。比如,在一些情况之下,同时使用z-index
和transform
会让z-index
失效等。
CSS中会产生新的层情况还有很多种:
- 当一个元素位于HTML文档的最外层(
<html>
元素)- 当一个元素被定位了并且拥有一个
z-index
值(不为auto
)- 当一个元素被设置了
opacity
,transforms
,filters
,css-regions
,paged media
等属性flex item
,也就是父元素的display
设置了flex
或者inline-flex
值,早期的box
值不行grid item
,也就是父元素的display
设置了grid
或者inline-grid
值isolation:isolate
- 元素的
mix-blend-mode
值不为normal
- 元素的
overflow-scrolling
值不为touch
- 元素的
filter
值不为none
- 元素的
perspective
值不为none
如需转载,烦请注明出处:https://www.w3cplus.com/css/3d-transform-and-z-index.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!