问题描述:设置几个标签的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更严格了。
演示效果: