欢迎光临
我们一直在努力

z-index设置无效的原因和解决办法

今天在做网站导航的二级菜单下拉时,碰到了Z-index设置无效的问题。导航下拉下面就是滚动的banner图,banner也没有设置Z-index,可是无论在二级菜单上或者他的父级标签上设置多么大的数值都是不管用的,随即查询baidu得知问题所在。

先来看官方给的定义的用法:
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(position属性值设置除默认值static以外的元素,包括relative,absolute,fixed样式)
注意看我加粗的那句话!!!然而这只是诸“元凶之一”,我查阅了一下别的资料,还有两个条件下也能导致这个问题的出现:
* 1、父标签 position属性为relative;*
* 2、问题标签含有浮动(float)属性;*
解决方法也很简单:
1、position:relative改为position:absolute;
3、去除浮动。
还有一种比较特殊的情况也会导致这个问题:
IE6 、IE7下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。(万恶的IE6啊~ )
解决方法也很简单: 在第一个relative属性加上一个更高的层级就可以了。
衡水网站制作问题总结:
我的解决办法就是在父级标签上加上position: relative机或者将z-index放到有position属性的父级的父级标签

赞(0)
未经允许不得转载:衡水seo博客 » z-index设置无效的原因和解决办法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

建站优化更专业 更敬业 更负责

建站报价联系我们