欢迎光临朱凯的个人博客!
朱凯,a3.work

css中z-index不起作用的解决方法

 发布时间: 2016-12-20 14:15      原创:  朱凯      评论: .       .人查看

这个现象以前多发生在IE6上,今天突然发现Safari也出现了这个情况。

借鉴ie6的解决思路,解决了这个问题。正常情况下,z-index值越大,该元素越靠近顶部。但是z-index起作用有一个前提,position属性要为relative,absolute或是fixed。

z-index不起作用通常有三种情况:

1、父标签 position属性为relative;

2、问题标签无position属性(不包括static);

3、问题标签含有浮动(float)属性

解决方法有三:

1、position:relative改为position:absolute;

2、去除浮动;

3、浮动元素添加position属性(如relative,absolute等)。

特殊的IE6:

IE6中父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。但是,相信这里面很多人不知道IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签。

解决:  给父标签添加z-index

转载请注明来源:   css中z-index不起作用的解决方法  - 朱凯博客

分享是一种快乐,也是一种美德:
¥打开支付宝,扫码领红包¥ 红包

支付宝 aliPay

微信 wxPay