z-index失效的几种情况，父标签position属性为relative的时候,详解

最新推荐文章于 2024-09-28 15:01:31 发布

爱叨叨的小嘟

最新推荐文章于 2024-09-28 15:01:31 发布

阅读量1w

点赞数 10

分类专栏：学习回顾文章标签： css html html5

本文链接：https://blog.csdn.net/L_Z_jay/article/details/120234031

版权

学习回顾专栏收录该内容

18 篇文章 0 订阅

订阅专栏

网上对这一方面解释的很多，我也不想把别人的抄过来。在这里是加上我对这些情况的理解还有我的一些疑惑，若有问题，请留言，谢谢！！！话不多说，进入正题：

文章重点：z-index失效的一类情况：父标签position属性为relative的时候,详解

声明：为了叙述方便，本文将用类名代替相应的元素

首先 z-index在何种情况下生效呢？

（1）简单定义：通常 z-index 的使用是在有两个重叠的标签，在一定的情况下，控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。
（2）Z-index 仅能在定位元素上奏效（也就是说要有position属性，再详细的说，它的值需要是relative、absolute、fixed）
- 补充：它的值也可以写成inherit，只要它的结果能是上边的三种也可以。不能是static，因为这个是默认值，相当于没有定位
（3）下面将详细的介绍
- 第一种情况（position:absolute）
- 测试定位为absolute（num01）的情况
- 例一
CSS代码
.public{
width: 100px;height: 100px;
transform: translate(50px,50px); /* 移动到坐标(50,50) */
color: white;
}
.num01{
position: absolute;
background-color: black;
}
.num02{
background-color: red;
}

HTML代码
- 结果（这是正常情况下的结果）
- 例二
- 当给第一个添加z-index后，效果如下
CSS代码
.num01{
position: absolute;
background-color: black;
z-index: 10;/新添加的/
}
- 结果

第二种情况（position:relative）
- 测试定位为relative（num02）的情况
- 上边我们已经可以知道，当给num01设置的z-index：10，num01就会出现最上层。这里我们给num02设置z-index：100，看有什么变化。
CSS代码
. public{
width: 100px;height: 100px;
transform: translate(50px,50px); /* 移动到坐标(50,50) */
color: white;
}
.num01{
position: absolute;
background-color: black;
z-index: 10;
}
.num02{
background-color: red;
z-index:100;
}

HTML代码
- 结果
- 哎呀，为什么没变呢，它怎么就不变呢？
- 嘿嘿，没变是因为我们没有给num02设置定位呀，找到问题啦，那就解决它呗
CSS代码
.num02{
position: relative;//添加的定位
background-color: red;
z-index:100;
}
- 结果
- 嘿嘿嘿，这不就戳来了
- 第三种情况（position:relative）
- 测试定位为static（num02）的情况
CSS代码
.num02{
position: static;
background-color: red;
z-index:100
}

HTML代码
- 结果
- 总结：可以看出，当为static时，num02上的z-index是无效的
- 第四种情况（position:relative）
- 测试定位为inherit（num02）的情况
- 例一
CSS代码
.father{
width: 100px;height: 100px;
transform: translate(50px,50px);/* 移动到坐标(50,50) /*
color: white;
position: relative;
}
.public{width: inherit;height: inherit;}
.num01{
position: absolute;
background-color: black;
z-index: 10;
}
.num02{
position: inherit;
background-color: red;
z-index:100; /* 修改的位置在这里*/
}

HTML代码
- 结果
- 例二
CSS代码
.father{
width: 100px;height: 100px;
transform: translate(50px,50px); /移动到坐标(50,50） /
color: white;
position: relative;
}
.public{width: inherit;height: inherit;}
.num01{
position: absolute;
background-color: black;
z-index: 10;
}
.num02{
position: inherit;
background-color: red;
z-index:9; /* 修改的位置在这里 */
}
- 结果
- 总结：只要inherit的值还是上边的哪三种，那么inherit也可以被用来使用

我在这里说下我的一个困惑，我在网上搜索

在这里插入图片描述

（1）基本都包括了一点：父标签position属性为relative的时候，那么z-index失效。
- 我对这句话的理解是：当一个子元素的父元素position属性为relative的时候，那么该子元素的z-index就失效了。但是，重点来了，如果我的理解没有错（我反正很心虚），那么就是这句话存在问题，你可以看看我上边关于属性值为inherit部分，他们的父元素的position属性为relative，但是，z-index没有失效啊。
- 我的理解可能有所错误，欢迎留言指正，咱们一起进步

z-index的补充

（1）父标签position属性为relative的时候，那么z-index失效。这句话应该还有另一层理解的方式。就像下边这样，（暂且称为多父子模式）

HTML代码

CSS代码
.father,
.fatherTwo{
width: 100px;height: 100px;
color: white;
position: relative;
}
.father{z-index: 1;}
.fatherTwo{z-index: 2;}/z-index:(x>=1)结果都如下/
.public{width: inherit;height: inherit;}
.num01{
position: absolute;
background-color: black;
margin-top: 50px;
z-index: 1000;
}
.num02{
position: inherit;
background-color: red;
z-index:100;
}
- 结果
- 总结：当不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染，与子元素的z-index值没有关系，这个才应该是上边这句话的本意吧（敲黑板）