z-index优先级比较的总结

说明
z-index属性在写页面的时候经常会遇到。但如果页面结构复杂且用到的z-index多我就会有点迷,下面是我的小结。

基本概念:
(1)z-index是深度属性,设置元素在z轴上面的堆叠顺序。
(2)只有dom设置了position:absolute | relative | fixed 才会有z-index属性
(3)堆叠上下文:当前dom往上级找,如果该级设置了z-index属性值(非auto),那么该级别dom就是堆叠上下文;如果往上级一直找不到,那么根级别dom就是堆叠上下文。

z-index优先级别比较:
(1) 有postion属性的dom(脱离文档流的dom)会在没有position属性的dom(文档流内的dom)的上面。
(2) 文档流内容的堆叠遵循后来居上的原则。(后面的如果和前面的dom重叠了,后面盖在前面)
(3) 同级的dom,它们的堆叠上下文一定相同。所以直接z-index比较,大的在上面,小的在下面,相同的遵循后来居上的原则。
(4) 非同级的dom,先要看它们的堆叠上下文。如果堆叠上下文一致,那么比较同(3);如果不一致,就比较他们堆叠上下文的z-index。(dom的z-index受父级的约束,父级如果小的话,子级再大也没用!)

发布了17 篇原创文章 · 获赞 0 · 访问量 381

猜你喜欢

转载自blog.csdn.net/huige232508/article/details/104772177