为什么设置z-index的伪元素会位于section下方而非仅在.btn-ring下方？

问题原因 #

这是CSS堆叠上下文的默认规则导致的：

• 伪元素::before本质属于.btn-ring的子元素，你给它设置z-index: -1时，子元素的z-index排序范围取决于父元素是否创建了独立的堆叠上下文。
• 你的.btn-ring虽然设置了position: relative，但没有显式设置z-index属性，因此不会生成独立的堆叠上下文，它的子元素的z-index会直接放到根元素的全局堆叠上下文里计算。
• 全局堆叠上下文里，z-index为负值的元素优先级低于所有普通流块级元素，因此::before的层级会低于未创建堆叠上下文的.sec--5，被section元素覆盖。

解决方法 #

只需要给.btn-ring显式设置任意大于等于0的z-index值，让它生成独立的堆叠上下文即可，这样内部的伪元素z-index只会在该上下文内部排序，仅低于.btn-ring本身，不会穿透到外层的section下方：

.btn-ring {
    /* 原有样式不变，新增以下属性 */
    z-index: 0;
}

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