以前好像说过这个问题,今天又遇到了,那就老生常谈,再说一次,说多了不伤身体,反而增加记忆。
现象:
一个设置了position:absolute;z-index:2000;的浮动层,居然被一个设置了position:relative;z-index:1;或者说根本就没有设置浮动属性和z-index的普通层遮住了,这在FF和IE8下是不会发生的,操蛋的IE7和IE6里,他偏偏就发生了,查阅了一点国外的资料,大意就是在ie67下,限定元素和浮动元素都要设置position属性和z-index属性,结合我这优秀的大脑,立马就想到了,只给absolute层设置了z-index,而没有给relative限定层设置z-index,设置后,弹出层如愿以偿的出现了。
举例:
HTML
<div class="rela">
<ul class="posi">
<li>他奶奶的</li>
</ul>
</div>
<div class="wahaha">娃哈哈哈</div>
CSS
.rela{
position:relative;
width:1000px;
height:30px;
z-index:1;/*这个不设置,下面的弹出层posi就会被wahaha给盖住*/
}
.posi
{
position:absolute;
z-index:2000;
width:200px;
height:30px;
top:35px;
left:0;
}
.wahaha{height:300px;background:#333;}
引用的资料原文
CSS: Z-Index and Internet Explorer
If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.
The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!
Thanks for wasting several hours of mine IE.
See here and here for others with this problem!
现象:
一个设置了position:absolute;z-index:2000;的浮动层,居然被一个设置了position:relative;z-index:1;或者说根本就没有设置浮动属性和z-index的普通层遮住了,这在FF和IE8下是不会发生的,操蛋的IE7和IE6里,他偏偏就发生了,查阅了一点国外的资料,大意就是在ie67下,限定元素和浮动元素都要设置position属性和z-index属性,结合我这优秀的大脑,立马就想到了,只给absolute层设置了z-index,而没有给relative限定层设置z-index,设置后,弹出层如愿以偿的出现了。
举例:
HTML
<div class="rela">
<ul class="posi">
<li>他奶奶的</li>
</ul>
</div>
<div class="wahaha">娃哈哈哈</div>
CSS
.rela{
position:relative;
width:1000px;
height:30px;
z-index:1;/*这个不设置,下面的弹出层posi就会被wahaha给盖住*/
}
.posi
{
position:absolute;
z-index:2000;
width:200px;
height:30px;
top:35px;
left:0;
}
.wahaha{height:300px;background:#333;}
引用的资料原文
CSS: Z-Index and Internet Explorer
If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.
The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!
Thanks for wasting several hours of mine IE.
See here and here for others with this problem!
出处:http://blog.163.com/zhengyong_04@126/blog/static/16428825920128723553807/
相关推荐
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
非常好用的jquery弹出框,也可做弹出层,遮盖层
一个弹出层的示例,用于在页面中弹出层,下拉列表一样会被遮盖
实用div实现的弹出层菜单,带遮盖层,简单实用
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
弹出层 weebox。可以实现遮盖底层页面,能够遮挡下拉控件。里面有些功能经过稍稍的改版,为了应付需要。
点击弹窗按钮则弹出信息,点击右上角关闭按钮则关闭弹出层,弹出后遮盖层部分不可点击,无上拉下滑操作。用作于提示,展示列表,添加内容等操作。
网页<Object>标签遮盖DIV标签解决方法,IE11亲测可用。
NULL 博文链接:https://tangdonnaui.iteye.com/blog/548289
JavaScript经典案例,实用素材。。。。。。。。。。。。。
JS+CSS遮盖层,完全支持ie等主流浏览器,并解决在ie6下无法遮盖窗口级控件问题。
弹出层兼容所有浏览器,用jquery编写,可兼容所有游览器
弹出层遮罩层效果(包括居中、不随滚动条滚动)
这个组件目前最新版本是:V2.1 可以弹出询问层,提示层,iframe层,iframe窗,加载层,tips层,tap层,相册层等等. 特性:弹出的层可以鼠标拖动,拖动时其层自动透明,弹出的还有透明遮盖层.
jquery的遮盖层代码,简单易用,方便使用,哈哈 规范化
今天测试div层和flash的交互,发现div层总是被flash层遮盖,在百度上找了一会,说是加个就成了,我加完后在IE下问题是解决了,但是FF下好像没有反应,后来才知道IE中和FF加的代码是不一样的,如下: IE浏览器下可用 ...
这是一款基于jQuery+HTML5实现的手机移动端模态窗口弹出层代码,手机遮罩弹出菜单代码。
本人制作的jquery弹出层拖拽插件...1、弹出浮动层(带或不带遮盖,及是否挡住整个页面只显示层) 2、支持层拖拽(拖拽时可增加虚影效果,同时完善用户体验,层只会在浏览器范围你拖拽) (压缩包中有说明及示例)
能够实现登录弹出遮盖层效果,居中显示,YinPing.html为起始页 ,效果不错 我一直在用 话说我也忘了从哪找的资源了
基于vue开发的popup 的mixins 用于管理弹出框的遮盖层