没有合适的资源?快使用搜索试试~ 我知道了~
关于IE7 z-index的浏览器兼容性问题完美解决方案
0 下载量 147 浏览量
2020-12-13
07:37:40
上传
评论
收藏 36KB PDF 举报
温馨提示
试读
1页
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 直接上例子: 复制代码代码如下: <div id=”container”> <div id=”box1″>This box should be on top</div> </div> <div id=”box2″> This box should not be on top; IE however seems to create a new stacking context for positio
资源推荐
资源详情
资源评论
关于关于IE7 z-index的浏览器兼容性问题完美解决方案的浏览器兼容性问题完美解决方案
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用
户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。
直接上例子:
复制代码代码如下:
<div id=”container”>
<div id=”box1″>This box should be on top</div>
</div>
<div id=”box2″>
This box should not be on top;
IE however seems to create a new stacking context for positioned elements,
even when the computed z-index of that element is ‘auto’.
</div>
复制代码代码如下:
body { margin: 0; padding: 0; }
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}
这是为什么呢?其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index
的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。
在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
复制代码代码如下:
body { margin: 0; padding: 0; }
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有没有z-index都无所谓了,但必须同position(relative或absolute)使用,就跟一个人
//生不了孩子一样,需要配合。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }
要想覆盖住父级的同级 ,父级的z-index就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊。
资源评论
weixin_38519060
- 粉丝: 1
- 资源: 900
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功