嘉兴网站建设模板网站,wordpress logo怎么换,建设自己的企业网站需要什么资料,找外包网站 和自己做by zhangxinxu from http://www.zhangxinxu.com 本文地址#xff1a;http://www.zhangxinxu.com/wordpress/?p471 一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点#xff0c;不会花费过多篇幅详细讲述。这里就简单带过#xff0c;z-index伴随着层的…by zhangxinxu from http://www.zhangxinxu.com 本文地址http://www.zhangxinxu.com/wordpress/?p471 一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点不会花费过多篇幅详细讲述。这里就简单带过z-index伴随着层的概念产生的。网页 中层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道层级越高图层越靠上越在上 面显示如果层发生重叠层级高的会覆盖层级低的如果非透明或半透明则会遮挡。 在photoshop中层的高低就是靠手动调的鼠标拖拽或是ctrl]或是ctrlshift[快捷键改变层的次序。如下图鼠标拖移改变层次序的过程中 在flash中类似可以手动改变图层次序或是使用as脚本例如容器对象.setChildIndex(显示对象,0)就是让对象底层显示而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。 在CSS中显然只能通过代码改变层级这个属性就是z-index要让z-index起作用有个小小前提就是元素的position属性要 是relativeabsolute或是fixed。就像生孩子一样一个人不顶用需要配合。下为z-index的业余示意图 按照正常的思维z-index层级越高内容越应该在上面显示。在大部分的浏览器在大部分的情况下确实如此但是不绝对。尤其遇到IE6这家 伙估计是后妈带大的从小营养不良结果后来健康问题一堆又一堆。z-index的问题就是其中之一而本文就是要讲讲这个IE6下z-index不起 作用的问题。 二、关于效果截图的些必要说明 下面的不是废话是为了更容易的理解我下面唾沫横飞的内容。 以下所有结果截图的大背景如下 1、页面上固定不动的一成不变的送豪宅也不会从良的是一个黑色背景透明度40%几乎满屏显示的层级为1的绝对定位层。HTML为div idblank/div对应CSS为#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity40); position:absolute; left:0; top:0; z-index:1;} 作用是为了让层级关系一目了然。看 这说明内容在z-index为1的绝对定位层之下。 这说明内容在z-index为1的绝对定位层之上。 2、页面上做对比的是美女图片图片在半透明黑色绝对定位层的上面还是下面很容易辨别这样您就能够对我所说的z-index不起作用有很直观的认识了。 三、IE6的抱怨浮动让我沉沦 现在开始真正的讲述问题的产生原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个1、父标签 position属性为relative2、问题标签无position属性不包括static3、问题标签含有浮动(float)属性。 您可以拿下面的代码自己做个简单测试 div idblank/divdiv styleposition:relative; z-index:9999; img stylefloat:left; srchttp://image.zhangxinxu.com/image/study/s/s256/mm2.jpg //div 丫的这z-index都9999了层级够高吧但是看下面的图 这一对比就知道问题了可能有人会疑问这会不会是IE6的relative自己感冒了而不是浮动(float)携带了“甲流病毒”。好我现在去掉浮动HTML代码如下 div idblank/divdiv styleposition:relative; z-index:9999; img srchttp://image.zhangxinxu.com/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:absolute2、去除浮动3、浮动元素添加position属性如relativeabsolute等。 四、固执的IE6它只认第一个爸爸 可能不少人知道这IE6下层级的高低不仅要看自己还要看自己的老爸这个后台是否够硬。用术语具体描述为 父标签position属性为relative或absolute时子标签的absolute属性是相对于父标签而言的。而在IE6下层级的表现有时候不是看子标签的z-index多高而要看它们的父标签的z-index谁高谁低。 有一定经验的人可能都知道上面的事实。但是相信这里面很多人不知道IE6下决定层级高低的不是当前的父标签而是整个DOM tree节点树的第一个relative属性的父标签。有时平时我们多处理一个父标签z-index层级多而复杂的情况不多见所以难免会有认识上 的小小偏差。 好下面展示这个bug。 条件很简单只要绝对定位的第一个元素的第一个爸爸或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码 div idblank/divdiv styleposition:relative; div styleposition:relative; z-index:1000; div styleposition:absolute; z-index:9999; img srchttp://image.zhangxinxu.com/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 idblank/divdiv styleposition:relative; z-index:1; div styleposition:relative; z-index:1000; div styleposition:absolute; z-index:9999; img srchttp://image.zhangxinxu.com/image/study/s/s256/mm3.jpg / /div /div/div 结果IE6童鞋喜笑颜开春光灿烂 您可以狠狠地点击这里改变父标签层级在线demo测试 五、必要的结语 老实讲我对z-index研究的精力其实比较有限本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测里面所蕴含的知识不是 CSS手册上的那点东西那只是冰山一角。这涉及到border及background的堆叠模型涉及到同层级的显示问题以及浏览器显示的些机制等 这是很深的一潭水。 总之慢慢来慢慢积累慢慢研究一定会一步一步揭开z-index的本质面纱的。 原创文章转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址http://www.zhangxinxu.com/wordpress/?p471 本篇完转载于:https://www.cnblogs.com/wqj0405/archive/2011/08/05/2128458.html
