伪元素z-index不生效？position:relative的无z-index包装器层级异常

你遇到的显示异常是两个独立问题叠加导致的，并非z-index规则本身失效，和层叠上下文的核心机制完全匹配：

• 非法CSS值导致的定位错乱
  你给伪元素设置的top:20缺少必填的长度单位px，属于浏览器无法解析的无效声明，整段属性会被直接丢弃。也就是说伪元素的垂直定位根本没有按预期生效，会保持绝对定位元素在父容器内的默认起始位置——紧贴父容器的内容区左上角，完全没有落在你预想的展示坐标上，自然会产生“层级不对”的观感偏差。
• 裁切行为带来的认知混淆
  你在父容器.wrapper上设置了overflow:hidden，所有超出100px×100px容器边界的子元素内容都会被直接裁切。你给伪元素设置的left:-20px会让伪元素左侧20px的宽度完全落在容器边界外，这部分内容被裁切后，很容易让你误以为伪元素被父容器的背景“压在了下面”。
  这里需要明确纠正一个常见认知：不管父元素有没有设置z-index、有没有创建独立层叠上下文，作为子元素的定位伪元素，永远不可能被父元素自身的背景、边框、阴影遮挡。按照CSS规范的层叠顺序规则，同一层叠上下文内，元素自身的背景层永远是最靠下的，所有子元素的渲染层级都在这层之上。你之前在CSS Battle场景下能正常生效的逻辑完全没有错，不存在规则变动导致的兼容问题。

只需要把伪元素定位的非法值补全，调整位置参数即可正常实现预期效果：

.wrapper::before {
  content: '';
  width: 100px;
  height: 50px;
  position: absolute;
  /* 补全缺失的px单位 */
  top: 20px;
  left: -20px;
  border-bottom-left-radius: 110px;
  border-bottom-right-radius: 110px;
  border: 20px solid #FFF58F;
  border-top: 0px;
  z-index: 5;
}

• overflow:hidden的裁切是几何层面的内容裁剪，和元素的前后层级没有任何关系：哪怕把伪元素的z-index拉到1000，只要位置超出了父容器的边界，超出部分依然会被裁掉不会显示，不要把裁切带来的显示不全错当成z-index失效。
• CSS对长度值的解析有硬规则：哪怕是值为0的长度可以省略单位，所有非0的长度值必须搭配px/rem等有效单位，否则整段声明会被浏览器直接忽略，不会按预期的数值生效。

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