为何设置z-index无效，无法将::after伪元素放置在父div的后方？

• 核心原因：父级div设置了transform: translateY(-15px)属性，该属性会触发创建独立的层叠上下文。
  按照CSS层叠规范，层叠上下文内部的所有子元素（包含伪元素）的堆叠层级仅在上下文内部生效，哪怕子元素设置负z-index，也只会排在该上下文内部的底层，无法穿透到父元素本身的后方。如果父元素没有设置transform属性，仅设置position: relative且未指定z-index的情况下不会创建层叠上下文，z-index: -1就可以让伪元素显示在父元素后方。
• 次要问题：代码中::after伪元素的top: -13、right: -13没有补充长度单位px，属于无效属性，也会导致伪元素位置不符合预期。

如果需要实现伪元素在父元素后方的效果，可以选择以下方案：

• 移除父元素的transform属性，改用margin-top: -15px实现位置上移，父元素不再创建层叠上下文后z-index: -1即可正常生效。
• 如果必须保留transform属性，可以为父元素新增一个外层容器，将当前伪元素的样式调整为外层容器的伪元素实现。

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