CSS z-index在ie67中不起作用

在chrome浏览器中可以看到这样的效果:                        但是在ie67中看到的是:

                                

这是z-index在ie浏览器中的一个兼容性问题:

  一般来说z-index越大,层级越高,就会越在顶层显示,但是在ie67浏览器中会出现问题,

ie浏览器中会以他的顶级父元素作为参考点,不是以父元素作为参考,所以要在父元素中添加position:relative;z-index:1000(比被遮住的那一层高就行),这样在ie浏览器中就会正常显示了。

比如说:

<div style="position:relative;z-index:10">
    <div>
        <img style="position:absolute;z-index:10"/><!--此图片被下一个div遮住了,这是我们在第一个div中添加position:relative;z-index:10就可以解决问题-->
    </div>
</div>
<div></div><!--这个div在ie浏览器中吧上面那个img遮住了-->

原文地址:https://www.cnblogs.com/alex-xxc/p/9740715.html