标签： z-index失效

一直以为只要z-index的值够大，元素肯定在*上层。实际不然，想要实现的效果如下左图，but~效果是下右图：

查了z-inex失效的原因，原来是两个元素不在同一楼层

分析：

元素1是元素2前一个元素的子元素，因为1的父元素在负一楼，所以无论1的z-index多大，都在负一楼，体现为z-index失效了

方案：

将1、2修改为平级元素，再设置1的position为absolute(非static),z-index高于元素2，即可实现1在2的上方。

修改后的bug:元素3和1、2元素的父级（一楼）同级，position:absolute,在二楼，在*上层

方案：

蒙层2出现时，将3的z-index:-1，即可实现3在2的下方

到此，问题解决。