IE7下z-index混乱问题(转)
2024-08-31 14:01:58
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。
直接上例子:
Html代码代码
- <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>
Css代码代码
- 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;}
效果:
1.png
这是为什么呢?其实这是IE浏览器的一个BUG——在IE浏览器中,定位元素会产生一个新的stacking context,并且从z-index的值为0开始。所以我们需要在这个元素的父元素上设置一个更高的z-index值。
在上述的box1中的父元素container设置一个更大的z-index就能解决这个问题。
修改后的css代码代码
- 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; }
效果:
2.png
要想覆盖住父级的同级 ,父级的z-index就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊。
尼玛的,现在通过google发现只要百度z-index就可以找到答案了,搜索也是一门技术活啊!!!!!!!!!!!!!!!!!!!!!!
最新文章
- c/c++连接mysql数据库
- Java设计模式(二) 工厂方法模式
- easyUI-combobox 后台导入Json数据的方法
- 删除ibus之后导致系统设置进不了
- Rotate bitmap by real angle
- C# string[,]与string[][]的区别
- ios统计代码行数
- python 前向引用
- servlet读取cookie问题
- jsp js java
- JAVA中extends 与implements有啥区别?
- WebRequest 对象的使用
- M03 利用Accord 进行机器学习的第一个小例子
- 美国5G:初步上线玩砸,信号难寻和4G无差别
- 分析Json/Xml的解析过程
- jq鼠标事件
- 30.Iterator
- 【原创】tyvj1038 忠诚 &; 计蒜客 管家的忠诚 &; 线段树(单点更新,区间查询)
- 【iCore1S 双核心板_FPGA】例程九:锁相环实验——锁相环的使用
- mac一些设置