问题描述:设置几个标签的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更严格了。
演示效果:
- 大小: 37.4 KB
分享到:
相关推荐
在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...
下面小编就为大家带来一篇ie6 z-index不起作用的完美解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接:https://shoushounihao.iteye.com/blog/1884481
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 直接上例子: 复制...
dom结构:正常的实现方式很容易:因为B本身就在A的后面,当A和B都设置了position属性(非static),且没有设置z-index的时候,其层叠关系是后面的元素覆盖前面的元素,这样只需要给A-child设置z-index属性值即可。...
z-index属性简介 引用: z-index : auto | number auto:默认值。 number:无单位的整数值,可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的...
IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时,如果不设置z-index属性,IE6/7下z-index默认为0,而IE8及以上浏览器z-index为auto,且zindex:auto的元素不参与堆叠优先级比较。 ff/...
在IE7及之前的版本中设置z-index的属性,没有生效。当父级元素若设置为position:relative时候,则子级元素的z-index属性会被覆盖,感兴趣的朋友可以了解下
解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于...上面的例子中,倘若将第一个div的z-index设置为-1,则无论p的z-index为多少,多会被下面的di
将下载的crx文件拖至谷歌浏览器的扩展程序中,IE-Tab-Multi是将谷歌浏览器的内核切换到IE内核,使其在谷歌中利用IETAB来打开只在IE兼容的网站
z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超过其最大值时按最大值处理。 FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对...
我想锁表头及锁定列。...这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking contex
NULL 博文链接:https://niunan.iteye.com/blog/326629
很久没有写前端代码了,最近有个项目需要亲自动手,但是在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用...
学习CSS网页制作:z-index在IE中的迷惑.pdf
今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
分布鲁棒优化 IE598NH-lecture-13-DRO.pdf