Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css中z-index不起作用解决办法

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

发布时间:2020-05-09   编辑:www.jquerycn.cn
jquery中文网为您提供css中z-index不起作用解决办法等资源,欢迎您收藏本站,我们将为您提供最新的css中z-index不起作用解决办法资源
z-index不起作用有几个原因,1、父标签position属性为relative;2、问题标签无position属性(不包括static);3、问题标签含有浮动(float)属性。


第一点,和我的相符,但我把它改成了position:absolute,问题依然存在。第二点、第三点和我的情况不符。

接着就是一层一层地追,发现把这个层(A)比较高一级的父层(B)加上”position:relative;z-index:100;”就好了,原来是B层比与相邻的层(C)低了,导致B层里的任何一层无论怎么设z-index,也高不过与B层相邻的那个C层。

第二次是任何浏览器都不起作用,还是一层一层的追,发现这一层的一个父层里有”overflow:hidden;”,这样这个父层下任何层使用z-index都会被与这个父层相邻的层遮住。

关于效果截图的些必要说明
下面的不是废话,是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下:
1、页面上固定不动的,一成不变的,送豪宅也不会从良的是一个黑色背景,透明度40%,几乎满屏显示的层级为1的绝对定位层。HTML为:<div id="blank"></div>,对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看:
内容位于半透明层之下
这说明内容在z-index为1的绝对定位层之下。

内容位于层之上
这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片,图片在半透明黑色绝对定位层的上面还是下面很容易辨别,这样,您就能够对我所说的z-index不起作用有很直观的认识了。

三、IE6的抱怨:浮动让我沉沦
现在开始真正的讲述问题的产生,原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签无position属性(不包括static);3、问题标签含有浮动(float)属性。
您可以拿下面的代码自己做个简单测试:

<div id="blank"></div><div style="position:relative; z-index:9999;"><img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" /></div>

丫的,这z-index都9999了,层级够高吧,但是,看下面的图:
IE6下的9999不管用
Firefox下图片层级正常

这一对比就知道问题了,可能有人会疑问,这会不会是IE6的relative自己感冒了,而不是浮动(float)携带了“甲流病毒”。好,我现在去掉浮动,HTML代码如下:

<div id="blank"></div><div style="position:relative; z-index:9999;"><img src="/s256/mm2.jpg" /></div>

结果IE6下:
IE6下的层级正常

您可能感兴趣的文章:
css中z-index不起作用解决办法
IE下绝对定位(position:absolute)失效
css中z-index 属性与用法详解
DIV遮住的链接可以点击解决办法
css div无法遮盖select解决方法
js鼠标滑过弹出层的定位IE6中bug的解决办法
jQuery UI API – .zIndex()
H5牛牛游戏源码前端开发的古怪现象
bash中too many arguments问题的解决方法
U盘无法格式化怎么办?U盘无法格式化解决办法

[关闭]