CSS中使用z-index不起作用如何处理

发布时间：2023-10-25 12:49:02 所属栏目：语言来源：

导读：这篇文章将为大家详细讲解有关“CSS中使用z-index不起作用怎么办”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

第一点，和我的相符，但我把它改成了po

这篇文章将为大家详细讲解有关“CSS中使用z-index不起作用怎么办”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

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

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

关于效果截图的些必要说明

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：

1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

，对应CSS为： #blank{width:100%; 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)属性。

您可以拿下面的代码自己做个简单测试：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!