记录css的伪元素层叠上下文z-index无效问题

发布于 2025-04-25  373 次阅读

记录css的伪元素层叠上下文z-index无效问题

在看朋友的前端项目时发生了一个奇怪的问题

image-20250425200706575

本来::before的z-index:-111;应该让其成为.tab-item的背景才对，但是实际并没有

后面经过研究，发现clip-path也会产生一个新的上下文

image-20250425201215438

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会产生如下情况

image-20250425195721371

要想在其下面要将父容器即tab-item的z-index移除，不产生新的层叠上下文才可行

image-20250425200459943

所以要想实现我们原来想要达成的那个效果，就选择在一个同层级的伪元素中去操作，于是就又加一个伪元素

        .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;
        }

效果如下

image-20250425203105726

QQ：2219349024
最后更新于 2025-04-25
懒得加标签（