记录css的伪元素层叠上下文z-index无效问题
在看朋友的前端项目时发生了一个奇怪的问题
本来::before的z-index:-111;应该让其成为.tab-item的背景才对，但是实际并没有
后面经过研究，发现clip-path也会产生一个新的上下文
css中默认的层叠上下文是一起的，也就是不使用容器的情况下
而使用容器或伪元素的情况下，父容器使用了clip-path，z-index这类会产生新层级上下文的属性时，在这个容器内部的元素或这个容器的伪元素（也属于这个容器的元素）会归属于新的上下文中，而容器本身不在这个新的层叠上下文中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>tttt</title>
<style>
body {
margin: 0;
background: #fce6e9;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.tab-label {
position: relative;
width: 200px;
height: 300px;
}
.tab-item2 {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
/* clip-path: polygon(100% 10%, 70% 50%, 100% 90%, 0% 90%, 0% 10%); */
z-index: 11;
background: #ff2f18;
}
.tab-item {
position: absolute;
width: 100%;
height: 40%;
content: "";
inset: 0;
/* clip-path: polygon(100% 10%, 70% 50%, 100% 90%, 0% 90%, 0% 10%); */
z-index: 12;
background: #fdcd85;
}
.tab-item::before {
content: "";
position: absolute;
inset: -2px;
background: #6d2a36;
/* clip-path: polygon(100% 8%, 68% 50%, 100% 92%, 0% 92%, 0% 8%); */
z-index: -111;
}
</style>
</head>
<body>
<div class="tab-label">
<div class="tab-item2" id="main-tab2"></div>
<div class="tab-item" id="main-tab"></div>
</div>
</body>
</html>tab-item和tab-item2因为是属于同一层，其互相之间的z-index是生效的
因此tab-item会高于tab-item2
同时tab-item的z-index: 12;会让其产生新的层叠上下文
导致::before哪怕是z-index: -111;也无法低于tab-item2
其中有点反直觉的一点就是::before应该在tab-item的下面，但是其实因为::before所属于新的层叠上下文中，而无法在父容器其下面
因此demo会产生如下情况
要想在其下面要将父容器即tab-item的z-index移除，不产生新的层叠上下文才可行
所以要想实现我们原来想要达成的那个效果，就选择在一个同层级的伪元素中去操作，于是就又加一个伪元素
.tab-item {
position: absolute;
width: 100%;
height: 40%;
content: "";
inset: 0;
/* clip-path: polygon(100% 10%, 70% 50%, 100% 90%, 0% 90%, 0% 10%); */
/* background: #fdcd85; */
}
.tab-item::before {
content: "";
position: absolute;
inset: -5px;
background: #6d2a36;
clip-path: polygon(100% 8%, 68% 50%, 100% 92%, 0% 92%, 0% 8%);
z-index:-20;
}
.tab-item::after {
content: "";
position: absolute;
inset: 0px;
background: #fdcd85;
clip-path: polygon(100% 10%, 70% 50%, 100% 90%, 0% 90%, 0% 10%);
z-index:-10;
}效果如下
Comments NOTHING