z-index优先级小结

z-index是深度属性，设置元素在z轴上面的堆叠顺序。

强调：z-index必须和定位元素position:absollute|relative|fixed一起使用，否则无效

1.z-index属性（number越大优先级越高）

2.特殊情况

（1）相同z-index：

       1）如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

       2）如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素。

（2）父子z-index关系处理：

       1）如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

       2）如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效 

（3）兄弟子元素z-index关系处理：

       1）如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

       eg：虽然第一个div的子元素（即s1）的z-index比较高，

             但是由于其父元素（即f1）z-index比第二个平级div（即f2）低，

             所以第一个div子元素（即s1）会被第二个父辈div（即f2）及其子元素（即s2）覆盖

 

转载于:https://www.cnblogs.com/Begin-Vic/p/6413984.html