伪元素Z-index问题：无法将白背景容器置于红边框伪元素上方

要让伪元素显示在白色盒子的后方，只需修改两处CSS：

1. 修改伪元素的z-index值 #

将.araink-section1 .column::after中的z-index: 0改为z-index: -1，伪元素会被放置在父元素的下方（父元素未创建独立层叠上下文，伪元素层级相对于父元素的父级上下文）。

2. 修正媒体查询中的伪元素选择器 #

当前媒体查询里写的是::before，但实际使用的是::after，需要统一：

修改后的关键CSS代码 #

.araink-section1 .column::after {
  border: 1px solid #8e221c;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.3s ease-in-out;
  content: "";
  z-index: -1; /* 调整为负层级 */
}

/* 媒体查询修正 */
@media (max-width: 960px) {
  .araink-section1 .column::after {
    display: none;
  }
  .araink-section1 .column {
    margin-bottom: 20px;
    flex: 1 1 100%;
    max-width: 100%;
  }
}

原理说明 #

• 父元素.column设置了position: relative但未指定z-index（默认auto），因此不会创建独立层叠上下文。
• 伪元素::after为绝对定位，z-index: -1会让它处于父元素的父级层叠上下文负层级区域，自然被父元素（包括白色背景）覆盖，显示在盒子后方。
• hover时的位移效果依然生效，视觉上呈现边框从盒子后方“探出来”的效果。

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