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问题完美解决方案

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

CSS3选择器,筛选指定的index的元素,兼容IE7+

1.定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 ul> li>1li> li>2li> ...

ie7下z-index失效问题解决方法(详细分析)

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上...

ie下z-index问题的解决方法

最近做了一个项目,用到多步骤表单,但是表单的进度条在ie下确显示不正常

离线解决IE7默认首页问题

  • 2008年11月25日 20:10
  • 271B
  • 下载

IE 6 & IE 7 Z-Index Problem

Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for...

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

html部分 首页 品牌 女装 女装: 耐克 阿...

UL li在IE7及以下版本问题

1、在IE7及以下版本中,UL中不能出现非LI标签,如果出现非LI标签那么,浏览器会自动将非LI标签用靠近它的LI标签包裹住,成为Li中的内容。 昨天做了一个页面,IE7和IE6没有进行测试,结果业...

jquery datepicker 在ie7中有滚动条时错位问题

jquery datepicker 在ie7中有滚动条时错位问题修正
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE7 设置z-index的覆盖问题
举报原因:
原因补充:

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