IE6/IE7设置z-index,子容器内absolute定位的层无法遮盖下层absolute定位容器解决办法

  有2个absolute定位的层,要求第一个层覆盖第二个层,第一个层设置z-index即使为10000,第二层不设置z-index或者设置为1,在IE6/IE7浏览器下第一个层还是被第二个层给遮盖住,其他浏览器这没有这个问题。

 

  解决办法就是父容器搜设置为relative定位,给父容器增加z-index,只要第一个absolute定位的层的父容器z-index大于第二个的,那么就可以实现第一个层覆盖第二个层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
未给父容器添加z-index,第一个absolute定位的层无论设置z-index多大都无法遮盖第二个浮动层
<ul><li style="position:relative;"><a href="">1</a><ul style="position:absolute;background:#eee;z-index:10000;width:30px"><li>1</li><li>1</li><li>1</li></ul></li></ul>
<ul><li style="position:relative"><a href="">2</a><ul style="position:absolute;background:#ddd;width:30px;z-index:1"><li>2</li><li>2</li><li>2</li></ul></li></ul>
<br /><br />
解决办法,给容器增加z-index来实现覆盖
<ul><li style="position:relative;z-index:1"><a href="">1</a><ul style="position:absolute;background:#eee;z-index:10000;width:30px"><li>1</li><li>1</li><li>1</li></ul></li></ul>
<ul><li style="position:relative"><a href="">2</a><ul style="position:absolute;background:#ddd;width:30px;z-index:1"><li>2</li><li>2</li><li>2</li></ul></li></ul>

IE6/IE7设置z-index,子容器内absolute定位的层无法遮盖下层absolute定位容器解决办法

加支付宝好友偷能量挖...


原创文章,转载请注明出处:IE6/IE7设置z-index,子容器内absolute定位的层无法遮盖下层absolute定位容器解决办法

评论(0)Web开发网
阅读(401)喜欢(0)JavaScript/Ajax开发技巧