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

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

文章重点：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值没有关系，这个才应该是上边这句话的本意吧（敲黑板）

文章到此就结束了，若有问题请欢迎留言，如果觉得对你有所帮助，请点赞支持，谢谢