解决IE7下z-index 无效的问题

最新推荐文章于 2017-11-03 17:48:00 发布
原创 最新推荐文章于 2017-11-03 17:48:00 发布 · 774 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie7 #调试

本文深入探讨了在IE7浏览器中使用z-index时遇到的渲染问题，揭示了当父容器被定位时，子元素的z-index属性会被重置的原理，并提供了解决方案——在父容器中设置z-index属性。同时强调了z-index与position配合使用的必要性。

在调试网页的兼容性的时候，我们发现在IE7下使用z-index的时候，无论把z-index的值设置得多大都没有达到我们理想中的效果，设置了z-index还是被其他层遮盖了，究其原因其实是IE7渲染DOM的问题，当一个父容器被定位(如position:relative)的时候,子元素的z-index属性会被重置。

解决的办法，是在其父容器中加上z-index值就可以了（z-index属性必须与position配合用，否则其不会生效的）。

css3的transform造成z-index无效解决方案
01-19
只锁头效果很好，IE11下会小抖，但chrome下很稳定停在那里。后来又加上锁定列，发现列会盖住表头。 百度到这里《小心 CSS3 Transform 引起的 z-index 失效》 “CSS3 Transform create new stacking context” 这个...
ie6 z-index不起作用的完美解决方法
09-24
解决IE6下z-index不工作的问题，不仅需要理解CSS属性的基本概念，还需要掌握特定浏览器的渲染规则。通过上述的几种方法，大多数情况下的z-index问题都可以得到解决。随着浏览器技术的不断进步，现代浏览器已经很少...
关于IE7 z-index问题完美解决方案
ygbada的专栏
05-26 255
              浏览器兼容性问题太让人蛋疼了，今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决，毕竟要从用户的角度着想。百度了好多还是无法解决，最后google了一下，找到了方法。        直接上例子：        <div id="container"> <div id="box1">This box ...
ie7下z-index失效问题解决方法(详细分析)
summergreenhtml的博客
09-16 566
绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 解决办法： 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先，其中包含的元素的z-index是相对于父级元素的index. …(要在上层显示的内容） …
z-index层级在IE中无效
w3c_null的博客
09-26 5733
z-index无效的两种可能情况： 第一种情况（z-index无论设置多高都没用）： 1、父级标签position的属性值没有设置为relative； 2、问题标签中没有写position属性值（不包括static）； 3、问题标签有浮动属性。 第二种情况： 正常情况应该是这样： 但是在ie下会出现这种情况： 这是因为在ie浏览器中，他把最外层的z-inde
ie7 z-index 无效
羽下佳人的博客
04-06 364
问题描述：HI投顾  节目单  弹出框  设置  z-index始终在底部被覆盖 代码：    头部视频直播代码：                        // 头部红条 部分    （position: relative; z-index:  1;）      视频直播                                      //  头部标题
ie z-index不起作用
weixin_33850890的博客
12-24 134
IE6的抱怨：浮动让我沉沦现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。...
IE6 select z-index无效，遮挡div bug的解决方法
12-09
今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。 解决方法之一：Iframe包裹select元素 使用iframe包住select，这样iframe有z-index，只要在div上设置的z-...
div层调整z-index属性无效原因分析及解决方法
09-24
第二种无效情况是在IE6及IE7浏览器中，z-index的层级表现不完全按照子标签的z-index值高低来决定，而是受到整个DOM树结构的影响。在这些浏览器中，即使子元素的z-index值很高，如果其父元素所在的层级较低，则子元素...
z-index在ie7下不起作用
u014081297的专栏
04-08 507
1、float和position选择一个用 2
ie7下z-index失效问题解决方法
anpeng5522的博客
05-23 182
绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。解决办法就是给有定位属性的父元素设置z-index 转载于:https://www.cnblogs.com/sandy-happyhour/p/5520883.html...
ie7下设置z-index无效如何解决？
weixin_30484247的博客
12-27 98
ie7下z-index无效的问题之前做练习的时候遇到过，百度解决掉之后就丢脑后了。今天项目中又发现这个bug，无奈又去百度，这次还是记下来，节省了百度的时间还能小装一把... 需求是这样的： 页面中的两个层默认隐藏，点击这个层的展开图标时要把这个层显示出来，点收起的时候再把这个层隐藏，因为两个层是上下排列，所以点击展开的时候正常的显示应该是这样的，如下（丑）图： 实现的代码我...
IE7下z-index失效问题及解决方法
暮雪进化史
10-19 412
在IE7浏览器内核下，z-index属性会失去 这个情况下该如何解决？ 参考 http://www.neirong.org/post-313.html
IE7不支持Z-index问题
weixin_30338497的博客
11-03 160
在IE7下，z-index设置无效 例如，当原本的效果应该是如下： 但在IE7下效果确实这样： 解决办法：父容器需设置position和z-index 转载于:https://www.cnblogs.com/l0520/p/7779379.html...
div层调整z-index属性在IE中无效原因分析及解决方法
nox
08-17 360
在写css代码时发现了一个很简单却又很多人应该碰到的问题，设置Z-INDEX属性无效，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed，感兴趣的朋友可以了解下，希望可以帮助到你 在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relativ
解决IE6 z-index 无效的问题
浪迹天涯
03-01 1444
在写一个网站的样式的时候，遇到IE6 下z-index 无效的问题，整得我好“头疼”，后面查查资料，终于把这个问题给解决了，解决的方法如下： 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时 候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。 有一定经验的人可能都知道上
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值