IE7 设置z-index的覆盖问题

原创 2013年12月04日 14:59:54

在IE7及之前的版本中

设置z-index的属性,确没有生效

查阅写资料,发现主要的结果和处理方法为:


父级元素若设置为position:relative时候,则子级元素的z-index属性会被覆盖


<div style="position:relative;"> 
<div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div> 
</div> 
<div style="position:relative;"> 
<div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div> 
</div> 

在这种情况下,无论第一个red的z-index设置多高,都是会被第二个black所覆盖的


解决的方案为,设置父级元素的z-index

<div style="position:relative;z-index:2;"> 
<div style="position:absolute;z-index:100;width:100px;height:100px;background:red;"></div> 
</div> 
<div style="position:relative;z-index:1;"> 
<div style="position:absolute;z-index:10;width:20px;height:20px;background:black;"></div> 
</div> 

这样,red就会覆盖black



IE7 绝对定位z-index 层级问题

先看两个对z-index以及position的常有认识 对于显式声明了position属性为非static的元素, 其z-index值越大, 越在上层. 绝对定位的元素, 其定位的参考...
  • u011622873
  • u011622873
  • 2013年11月22日 11:25
  • 2123

关于IE7 z-index问题完美解决方案

浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 ...
  • heirenheiren
  • heirenheiren
  • 2013年10月10日 11:23
  • 3549

关于IE7 z-index的浏览器兼容性问题完美解决方案

关于IE7 z-index的浏览器兼容性问题完美解决方案 来源:互联网 作者:佚名 时间:01-07 17:13:54 【大 中 小】 在了IE7的z-index问题上真是很头疼。可又不...
  • cly153239
  • cly153239
  • 2015年07月13日 16:57
  • 622

关于IE7 z-index问题完美解决方案

浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 ...
  • fengweifree
  • fengweifree
  • 2013年11月26日 15:47
  • 899

z-index无效,无论设置多大都被其他的元素覆盖

z-index问题 .test-div{ border:1px blue solid; width:300px...
  • zhu562002124
  • zhu562002124
  • 2015年09月18日 13:55
  • 9215

利用z-index属性实现网页弹出框

java web应用开发过程中,有些用户操作需要以弹出框形式展示,今天对以往项目开发中的弹出框实现原理仔细分析了一下,使用CSS的z-index属性,可以实现简单的弹出框效果。具体原理: .mask{...
  • wojiushiwo945you
  • wojiushiwo945you
  • 2015年01月27日 15:44
  • 1924

div层调整z-index属性无效原因分析及解决方法

这是在学习css中遇到的一个问题。 div层调整zindex属性在IE中无效原因分析及解决方法 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,...
  • LEI2879223426
  • LEI2879223426
  • 2017年04月07日 20:38
  • 2127

div层调整z-index属性无效原因分析及解决方法

div层调整zindex属性在IE中无效原因分析及解决方法很久没有写前端代码了,最近有个项目需要亲自动手,但是在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CS...
  • promiseCao
  • promiseCao
  • 2016年10月24日 15:36
  • 1430

ie7下子元素设置z-index无效的解决办法

html部分 首页 品牌 女装 女装: 耐克 阿...
  • wuzhe128520
  • wuzhe128520
  • 2015年12月09日 14:19
  • 407

项目中弹出页面的显示层次问题 CSS中z-index属性

1.CSS z-index 属性 定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素可拥有负的 z-index 属性值...
  • u014746965
  • u014746965
  • 2015年12月24日 10:18
  • 2106
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE7 设置z-index的覆盖问题
举报原因:
原因补充:

(最多只允许输入30个字)