z-index注意点

最新推荐文章于 2020-04-11 16:12:38 发布

emilyOrchid

最新推荐文章于 2020-04-11 16:12:38 发布

阅读量683

点赞数 1

文章标签： z-index-定位

本文链接：https://blog.csdn.net/emilyorchid/article/details/48002677

版权

                    
                    z-index 定位元素关系 
z-index只有添加在定位元素上才起作用，否则非定位元素上加了z-index也不起作用。
z-index在没有设置的时候，默认值为0
z-index值越大，层级越高
一般排序优先级： 
 
  position属性+z-index值大 > position属性+z-index值小 > 无position属性+z-index（无论z-index值多大，都是没有作用的）
不同层级的z-index比较的时候，均是按同层级的z-index进行比较，即和父元素的z-index有关系 
 
  例如：div1(position:relative; z-index:5;)、div2(position:relative;z-index:3;)是并列节点，div11(position:absolute;z-index:1;) 、div12(position:absolute;z-index:7)是div1的子节点，这样我们排序会发现： 
 
    div11与div12的层级均高于div2，是因为div11与div12的父元素的z-index大于div2的z-index
子元素的层级均高于该父元素,即使子元素的z-index小于父元素