by zhangxinxu from http://www. 一、匆匆带过的概念 在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图,鼠标拖移改变层次序的过程中: 在flash中,类似,可以手动改变图层次序,或是使用as脚本,例如:容器对象.setChildIndex(显示对象,0)就是让对象底层显示,而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。 在CSS中,显然,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。就像生孩子一样,一个人不顶用,需要配合。下为z-index的业余示意图: 按照正常的思维,z-index层级越高,内容越应该在上面显示。在大部分的浏览器在大部分的情况下,确实如此,但是不绝对。尤其遇到IE6,这家伙,估计是后妈带大的,从小营养不良,结果后来健康问题一堆又一堆。z-index的问题就是其中之一,而本文就是要讲讲这个IE6下z-index不起作用的问题。 二、关于效果截图的些必要说明 以下所有结果截图的大背景如下: 作用是为了让层级关系一目了然。看:
2、页面上做对比的是美女图片,图片在半透明黑色绝对定位层的上面还是下面很容易辨别,这样,您就能够对我所说的z-index不起作用有很直观的认识了。 三、IE6的抱怨:浮动让我沉沦 <div id="blank"></div><div style="position:relative; z-index:9999;"><img style="float:left;" src="http://image./image/study/s/s256/mm2.jpg" /></div> 丫的,这z-index都9999了,层级够高吧,但是,看下面的图: 这一对比就知道问题了,可能有人会疑问,这会不会是IE6的relative自己感冒了,而不是浮动(float)携带了“甲流病毒”。好,我现在去掉浮动,HTML代码如下: <div id="blank"></div><div style="position:relative; z-index:9999;"><img src="http://image./image/study/s/s256/mm2.jpg" /></div> 结果IE6下: 您可以狠狠地点击这里:在线demo测试 我想,问题应该都清楚了,至于原因,我起初以为是haslayout搞的鬼,后来,用zoom一测试,发现不是(IE7下无此bug也证明不是haslayout的原因),似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为absolute可以解决这一问题,我就怀疑是不是浮动让relative发生了些变化,float与relative在水平定位上可以说是近亲,会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已,真正的原因还是去问IE6的后妈吧。 解决方法,解决方法有三,1、position:relative改为position:absolute;2、去除浮动;3、浮动元素添加position属性(如relative,absolute等)。 四、固执的IE6:它只认第一个爸爸 有一定经验的人可能都知道上面的事实。但是,相信这里面很多人不知道IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签。有时平时我们多处理一个父标签,z-index层级多而复杂的情况不多见,所以难免会有认识上的小小偏差。 好,下面展示这个bug。 条件很简单,只要绝对定位的第一个元素的第一个爸爸,或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码: <div id="blank"></div><div style="position:relative;"><div style="position:relative; z-index:1000;"> <div style="position:absolute; z-index:9999;"> <img src="http://image./image/study/s/s256/mm3.jpg" /> </div> </div></div> 可以看到,mm3图片的父标签div 是绝对定位,层级9999,比1大多了,绝对定位的父标签层级1000(10000也一样),也比黑色半透明层的z-index:1大多了,但是,我们可怜的IE6童鞋—— 再看看以Firefox为代表的其他童鞋: IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊! 知道原因解决就很轻松了,给第一任老爸添加z-index后的HTML代码如下: <div id="blank"></div><div style="position:relative; z-index:1;"><div style="position:relative; z-index:1000;"> <div style="position:absolute; z-index:9999;"> <img src="http://image./image/study/s/s256/mm3.jpg" /> </div> </div></div> 结果IE6童鞋喜笑颜开,春光灿烂: 您可以狠狠地点击这里:改变父标签层级在线demo测试 五、必要的结语 总之,慢慢来,慢慢积累,慢慢研究,一定会一步一步揭开z-index的本质面纱的。 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] (本篇完) |
|