由于我们公司的编辑人员发现他们编辑的文章分享到微信浏览器之后,和我在页面顶部添加的固定定位的引导下载的导航条样式之间产生了冲突,他们编辑的一部分内容可以直接覆盖在我的导航条上,要知道我的导航条已经将层级设置到了9999了,所以肯定不是层级低的原因,经过在网上查询发现可能是覆盖在我的导航条上的内容块运用了css3 3d属性,后来验证发现,这个section确实存在一个tranform:translateZ(10px)属性。这就是safria让我设置的z-index失效的原因。那么这个问题怎么解决呢?经过翻阅网上资料找到两个比较好的解决办法。
方法1:
父级,任意父级,非body级别,设置overflow:hidden可恢复和其他浏览器一样的渲染。
方法2:
以毒攻毒。有时候,页面复杂,我们不能给父级设置overflow:hidden,怎么办呢?答案就是,给需要前置显示也就是层级高的那个也设置transform:translateZ()这个属性;,当然,这个translateZ()中的数字最好比层级不高的那个translateZ()的大,具体多少,可以尝试下使用1000px,比较保险。
有时候,只使用第一种方法不顶用,那就两种方法都用上,反正这两个也没啥冲突,保你药到病除。