关于IE对z-index的解析

最新推荐文章于 2021-08-04 01:06:11 发布

最新推荐文章于 2021-08-04 01:06:11 发布 · 175 阅读

文章标签：

#IE #Chrome #CSS #Firefox

Web开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个关于Z-Index在Internet Explorer浏览器中的显示问题，并提供了两种有效的解决方案。问题出现在当试图通过Z-Index属性调整元素层级时，IE与其他现代浏览器如Firefox和Chrome的行为不一致。

问题描述：设置几个标签的z-index，想实现不同层次的叠加效果。FireFox、Chrome测试都OK，到了IE就挂了。

解决方案：

（1）首先，问题展现

<div class="outter">
<!--外层 outter css为 position: relative  -->
<ul>
	<li><h1><!--h1 css 为 z-inde:2 position: absoulte  --></h1></li><!-- li css 为 position: relative  -->
	<li><h1></h1></li>
</ul>
<!--  z-index :1 position: absoulte相对外层div player-->
<div class="bg"></div>
</div>

想要实现的效果就是给H1这个标签设置一个背景色，比如要设置透明背景。那么需要将div.class='bg'这层的z-index小于h1的z-index。上面的方式，在FireFox，Chrome中测试OK，但IE中，h1始终不能叠放于div.class='bg'，照理z-index的设置顺序没问题，到底是哪里出了问题？

（2）问题分析

利用IE的IE Developer ToolBar分析下以上代码的z-index后，基本就能得出答案了。IE对于z-index的解析是这样的：

div.class='bg'的z-index=1，ul,li的z-index=0,那么h1的z-index就算设置的再大，IE解析的时候始终都叠放于div.class='bg'下

（3）解决方案

1.将li 的css position: relative 去掉，让h1标签和div.class='bg' 标签平行绝对于div.class='outter'进行定位；

2.再者就是设置ul,li的z-index应该也能解决问题，没测试过。

说明：本人需要实现的是一个图片播放器的代码，可能在其它地方该种方法并不适用，只是对于z-index的解析，或许IE更严格了。

演示效果：