浏览器兼容性问题太让人蛋疼了,今天可是废在了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;}
效果:
1.png
这是为什么呢?其实这是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; }
效果:
2.png
要想覆盖住父级的同级 ,父级的z-index就必须别的大,这就跟拼老爸一样,老爸强你就强,这就是传说中的哲学啊。
尼玛的,现在通过google发现只要百度z-index就可以找到答案了,搜索也是一门技术活啊!!!!!!!!!!!!!!!!!!!!!!
相关推荐
浏览器兼容性问题太让人蛋疼了,今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决,毕竟要从用户的角度着想。百度了好多还是无法解决,最后google了一下,找到了方法。 直接上例子: 复制...
我想锁表头及锁定列。...这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去stackoverflow看文章,也没办法。既然不能控制“new stacking contex
非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。
现有的工具提示覆盖解决方案不使用覆盖背景,或者如果使用覆盖背景,则它们将无法考虑父容器已设置CSS z-index属性的时间。 (子元素的z-index不能覆盖其父元素的z-index )。特征程序化API和生命周期回调叠加层...
如你是做相关框架或者是企业管理软件的,需要使用到它来布局,那他的层级是最高的,也就是说他的z-index是最高的,那就会带来一个问题,假如你的ifream上面可能会出现诸如菜单,悬浮div的时候,那他们将会被帧覆盖。...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。 实现思路通俗易懂: 首先,我们要...
-实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语翻译(feedback:vbelyaev)。 +2010-06-30 v2.3.1 -ExtAspNet控件将不在依赖ViewState,...
4.7.11 z-index的相关问题以及Flash和IE 6下的select元素 4.7.12 插入png图片 4.7.13 多版本IE并存方案——CSS的调试利器IETester 第5章 高质量的JavaScript 5.1 养成良好的编程习惯 5.1.1 团队合作——如何...
透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果; 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示: 首先声明:由于...
11、搜索功能会遇到的问题及其解决方案 14 12、搜索过滤 16 13、注意 16 14、WCM高级搜索参数 16 ADVANCED WCM/WEBSPHERE PORTAL SEARCH INTEGRATION 17 Introduction 17 How to search WCM content using this ...
tips[27] = '“放之四海皆准则”的是真理,真理并不是一种方法,没有一种方法能解决所有的问题;掌握真理,而不是掌握某种方法。'; tips[28] = '在理解的基础上借鉴,就是站在巨人的肩膀之上;没有区分的全盘抄袭,...