Tabs组件z-index失效及float:left分层问题修复求助

问题核心 #

你已经定位到是父子元素堆叠上下文导致的z-index失效：每个li设置position: relative后会创建独立堆叠上下文，内部的.tab-slice只能在当前li的层级内生效，后面的li会直接覆盖前面的斜角元素，只有最后一个tab的斜角能正常显示。

修复方案 #

不需要移除li的position: relative（保留未来active类的层级控制能力），只需通过调整li的z-index顺序让前面的tab层级高于后面的，即可让前面的斜角显示在后面的tab之上：

1. 给ul.tabs添加position: relative，作为所有li的统一堆叠上下文容器
2. 利用CSS选择器给li设置递减的z-index：第一个li层级最高，依次降低
3. 给.active类设置更高的z-index，确保激活态tab能覆盖其他tab（兼容未来功能）

修改后的CSS代码

ul.tabs {
    margin: 0px;
    // overflow: hidden;
    clip-path: inset(0 -100vw 0 0);
    display: inline-block;
    position: relative; /* 添加：作为所有li的堆叠上下文容器 */
}

ul.tabs>li.active {
    float: left;
    padding-right: 40px;
    padding-top: 6px;
    padding-left: 40px;
    height: 56px;
    background: lightblue;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    max-width: 222px;
    position: relative;
    z-index: 10; /* 提高激活态层级，确保显示在最上层 */
    box-sizing: border-box;
    border: 1px solid #10172E;
}

.tab-slice.active:after {
    content: '';
    position: absolute; /* 改为absolute，避免relative导致的布局偏移 */
    width: 40px; /* 用固定值替代百分比，布局更精准 */
    height: 100%;
    top: 0;
    right: -40px;
    border-right: 18px solid transparent;
    border-bottom: 54.5px solid lightblue;
    z-index: 1; /* 在active li内部层级足够 */
}

ul.tabs>li {
    float: left;
    padding-right: 40px;
    padding-top: 6px;
    padding-left: 40px;
    height: 56px;
    background: darkblue;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    max-width: 222px;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #10172E;
}

/* 给li设置递减的z-index，确保前面的tab层级高于后面的 */
ul.tabs>li:nth-child(1) { z-index: 9; }
ul.tabs>li:nth-child(2) { z-index: 8; }
ul.tabs>li:nth-child(3) { z-index: 7; }
ul.tabs>li:nth-child(4) { z-index: 6; }

ul.tabs>li>a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: $alis-white;
}

.tab-slice {
    position: absolute;
    width: 40px; /* 固定宽度，避免百分比适配问题 */
    height: 100%;
    bottom: -1px;
    right: -40px;
    border-right: 18px solid transparent;
    border-bottom: 56px solid #10172E;
    z-index: 1; /* 无需过高，父li的z-index已确保层级 */
}

.tab-slice:after {
    content: '';
    position: absolute; /* 改为absolute，简化布局控制 */
    width: 40px;
    height: 100%;
    top: 0;
    right: 0;
    border-right: 18px solid transparent;
    border-bottom: 54.5px solid darkblue;
    z-index: 1;
}

关键调整说明

• ul添加position: relative：让所有li的z-index在同一堆叠上下文生效，避免全局层级混乱
• li的z-index递减：前面的tab层级高于后面的，确保斜角不会被后续tab遮挡
• active类z-index设为10：远高于普通li层级，未来实现active切换时，激活态会自动覆盖其他tab
• .tab-slice及:after改为absolute：消除relative定位导致的布局偏移，简化层级控制

效果验证 #

• 所有tab的斜角均正常显示，无遮挡问题
• 激活态tab（.active）自动显示在最上层，兼容未来功能需求
• 保留float: left布局，tab顺序保持1-4正确

内容的提问来源于stack exchange，提问作者Micah