父元素应用transform: scale()时，如何保持背景元素处于底层？

问题根源：为按钮添加transform: scale(0.97)时，会触发创建新的堆叠上下文。此时伪元素设置的z-index: -1会相对于这个新上下文生效，不再处于按钮的背景层级，导致红色光晕跑到按钮前景。

解决方法：给按钮本身显式设置z-index: 1，确保按钮的层级始终高于其伪元素，即使触发transform创建堆叠上下文也不会改变层级关系。

修改后的代码：

<style>
.button-glow {
  margin: 2.5rem;
  width: 5rem;
  color: white;
  background: blue;
  border-radius: 50px;
  transition: all 500ms;
  position: relative;
  z-index: 1; /* 添加这行 */
}
.button-glow:active {
  transform: scale(0.97);
}
.button-glow:hover:after {
  content: '';
  background: red;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 50px;
}
</style>

<button class="button-glow"> Test </button>

内容的提问来源于stack exchange，提问作者Eli O.