原来学东西真的需要复习之css的position
Posted in Works, css by chisdy on September 7th, 2009 1,090Views and 12 Comments »最近在弄网站的时候出现个问题,也是之前一直没去解决的,一个非常简单的问题,花了我几个小时的时间一步步去查找,如果平时的知识点能好好的积累的话,根本没必要花这样的冤枉时间,NND。
我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西,说实话挺讨厌float的,老是需要清除浮动以至于得到满意的效果。用position的话,不仅可以考虑在去掉css的情况下html文档的重点输出顺序,还可以减少不必要的嵌套代码,更重要的就是自由,爱放哪放哪。
这次的问题出现在position:relative同辈元素的z-index设置上,一般同辈元素都是靠z-index去定位层级,z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素,在不设置z-index值的情况下,因为#ibanner的html输出在#header的后面,所以#ibanner层对比#header层来说是居上叠加的,看Demo1
Demo1在IE(IE6、IE7、IE8,Jquery紧支持IE6+)浏览器下,很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner,跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header,没理由啊,想不通,后来看了14px发布的《层叠加的五条叠加法则》后才明白过来,原来白为IE鼓掌了,最后变成又是IE的问题了。
接下来最终目的是要把.nav的层级提高,那么只需要搞定IE就行了,这个就简单了,设置#header跟#ibanner的z-index值就OK了。看Demo2(中间迷失了一个多小时,以为#ibanner设置z-index值就OK了,一直在测试就是不行,还用上了判断为IE浏览器的时候,#ibanner的z-index值为-1,太扯了,太瞎了。还有个可能是jquery的问题。)
我是明白过来了,估计看这篇文章的人一下子反应不过来,去看下14px发布的《层叠加的五条叠加法则》就清楚了,自己测试摸索吧,这样才记得牢。



