React搭配Bootstrap开发时z-index不生效，伪元素::before无法置于元素下方

问题根因 #

这是CSS堆叠上下文规则导致的：默认状态下，子元素（含伪元素）设置z-index: -1时，会排到当前元素所属的父级堆叠上下文的下层，而不是仅排到当前元素的下层，所以会出现被上层元素遮挡、不同视口下表现不一致的问题。你遇到的小屏仅部分生效、大屏完全失效的情况，就是不同视口下父级元素堆叠层级变化引发的。

修复方法 #

只需要给.not-main添加isolation: isolate属性即可，修改后的CSS代码如下：

.not-main{
    margin-top: 25px;
    /* 新增该行，为当前元素创建独立堆叠上下文 */
    isolation: isolate;
}

生效逻辑 #

isolation: isolate会给当前元素创建一个完全独立的堆叠上下文，内部所有z-index设置仅在该上下文范围内生效：

• 伪元素的z-index: -1只会排在该独立上下文的最底层，刚好位于.not-main自身背景的下方
• 不会穿透到.not-main的父元素下层，也不会被其他同级元素遮挡，所有卡片的伪元素表现会完全统一。

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