关于About区块添加黑色背景后z-index为-1的黄色伪元素边框消失的解决需求

这个问题我太熟了！核心是**堆叠上下文（stacking context）**在搞怪。当你给#about添加黑色背景时，如果它触发了堆叠上下文（比如设置了position: relative/absolute、opacity < 1、transform等属性），内部的伪元素z-index: -1就会被#about的背景覆盖——因为伪元素的负z-index是相对于它的父元素.col-left的堆叠上下文，而.col-left又处于#about的堆叠上下文中，导致伪元素的层级落到了#about背景的下方。

下面给你几个可行的解决方案，都能保留黑色背景同时让黄色边框正常显示：

方案1：调整伪元素和图片的层级关系 #

把.img设置为定位元素并给它一个正z-index，伪元素的z-index设为比.img小的值，这样伪元素会在图片下方，但不会掉到#about背景下面：

#about .col-left .img {
  width: 100%;
  height: 100%;
  border: 10px solid black;
  position: relative; /* 新增：让图片成为定位元素 */
  z-index: 2; /* 新增：提升图片层级 */
}
#about .col-left .img::after {
  content: "";
  position: absolute;
  left: -33px;
  top: 19px;
  height: 98%;
  width: 98%;
  border: 10px solid yellow;
  z-index: 1; /* 从-1改为1，确保在图片下方 */
}

方案2：提升.col-left的堆叠上下文层级 #

如果不想改伪元素的z-index，直接给.col-left添加一个正z-index，确保它的整个堆叠上下文在#about背景之上：

#about .col-left {
  position: relative;
  z-index: 1; /* 新增：提升父元素层级 */
}

这样伪元素的z-index: -1只会让它处于.col-left的下方，而.col-left在#about背景的上方，黄色边框依然能正常显示。

方案3：移除伪元素的z-index，利用定位默认层级 #

因为.img是非定位元素，绝对定位的伪元素默认会处于它的内容后方，完全可以不用z-index来控制：

#about .col-left .img::after {
  content: "";
  position: absolute;
  left: -33px;
  top: 19px;
  height: 98%;
  width: 98%;
  border: 10px solid yellow;
  /* 移除z-index: -1 */
}

这个方法最简洁，刚好满足你“伪元素显示在图片后方”的需求。

你可以根据自己的代码结构选一个最适合的方案，亲测都能解决问题！

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