打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
IE6下的z
首先要声明,万恶的IE6!
有如下代码:
<div>
  <div id="a">
    <ul id="a1">
     <li>....</li>
    </ul>
  </div>
  <div id="b">
   <div id="b1">
    <div id="b11">
     <p id="b111"></p>
    </div>
   </div>
  </div>
</div>
现,假设有
#a{position:relative;float:left;}
#a1{position:absolute;top:0;left:100px;z-index:999'}
#b11{position:relative;float:left;}
#b111{position:absolute;top:0;left:0;}

那么,在chrome.Firefox下,#a1的确是的#b111上面。这是没有问题的。但是一到IE6下一看,傻了!#b111居然盖在#a1的上面。不是#a1的z-index已经是999了啊,而#b111才是0啊!999 > 0 (绝对真理)!!!
为什么IE6下会是如此让人蛋疼的事情呢?

原来IE6按先后出现的顺序来绝定层的堆叠顺序,而对#a1的z-index:999置之不理,所以,无论你把#a1的z-index:999999999999999...(以下省支300000个9)
。。。,也是没有用的。那么要如何解决这个问题呢?

办法很简单:将#a1的父元素a的z-index设到大于#b111的父元素#b11,那么就有:
#a{position:realtive;float:left;z-index:998;}
这样#a1就可以盖在#b111上了。

有人可能会问,如果#b111一直上溯到它的祖先的过程中,如果出现有比#a的z-index大的会怎么样呢?
,很显然,#b111一定会在#a1的上层(实际上从dom的层级来看,#b111比#a1要晚两辈!!!)。这个时候就提出了一个问题:IE6是如何决定它们的层级顺序呢?

答案就是:拼爹(也可能是爹的爹,爹的爹的爹,爹的爹的爹的爹...)!!! 总而言之,谁的祖先z-index最在,谁就在最上面!谁的背景(后台)z-index最硬,谁就在最上面。

靠,IE6什么时候把我朝的特色也学了去,真是让人感叹啊!



本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
CSS三列等高布局
让两个Div并排显示
IE下 z-index 的各种坑
可选可输入下拉框jquery插件(非div+text输入框实现)
Div浮动自适应高度
【聊代码】第一0二集 css样式(之七十二)jpg图片遮罩层
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服