右侧圆形边框被右侧页面遮挡，z-index无效如何修复？

你的问题出在transform创建的堆叠上下文和z-index的生效条件上：

• .wrapper使用了transform，这会为它创建一个独立的堆叠上下文，里面的.slide作为flex子元素，默认按DOM顺序堆叠——第三个.slide three会自然覆盖在第二个.slide two之上，哪怕给circle2加了z-index也没用，因为circle2的父元素.slide two堆叠层级更低。
• 另外，z-index只对非static定位的元素生效，你给circle2加了z-index但没设置定位，这个属性根本不起作用。

修复方案 #

修改CSS部分，调整slide的定位和堆叠层级：

/*Main settings*/
.slide {
    width: 100vw;
    height: 100vh;
    position: relative; /* 新增：让slide成为定位容器，参与堆叠上下文 */
}

.one {
    background: #151515;
    z-index: 1;
}

.two {
    background: #000000;
    z-index: 3; /* 设为比three更高，确保子元素能显示在three之上 */
}

.three {
    background: #151515;
    z-index: 2;
}

/* 给circle2加上定位，确保z-index生效（可选，父层级调整后已解决问题，加上更稳妥） */
.circle2 {
    position: relative; /* 新增 */
    z-index: 99;
    /* 其他原有样式不变 */
}

原理说明 #

• 给.slide设置position: relative后，可通过z-index调整堆叠顺序，让.slide two层级高于.slide three，其内部的circle2自然不会被遮挡。
• 给circle2加上position: relative，确保z-index属性正常生效，避免后续样式变更带来的问题。

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