全屏状态下层级问题(z-index)

2019独角兽企业重金招聘Python工程师标准>>>

有时在全屏状态下，要点击按钮有弹框出现，然而浏览器的z-index最大为

2147483647

z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超过其最大值时按最大值处理。 FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层 最小值 IE FireFox Safari的z-index最小值是-2147483648 Opera的z-index最小值-2147483584 FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定 IE Safari Opera在z-index<0时显示,在小于其最小值时都按其最小值处理 等值时表现 各个浏览器当两个层z-index相同时,按网页代码中层出现的顺序,后出现的层高于先出现的层。 跨浏览器永远最大：2147483647 跨浏览器永远最小：Hack(”IE,Safari,Opera”:-2147483648,”FireFox”:0)

这时如果用z-index来实现将会有浏览器问题。

解决方案是 ：利用继承，将要弹框的内容写在全屏的内容里面。这时全屏情况下，将要弹框的内容的层级也会继承过来，z-index的效果将相对于全屏状态下！！！

 

转载于:https://my.oschina.net/u/2306318/blog/879608