小屏幕下固定Hero Image被第三列内容遮挡的问题求助

我的固定Hero Image本身响应式显示正常，但小屏幕下滚动页面时，它能正常显示在前两列内容后方，第三列的内容（包括带链接的图片和文本）却会完全遮挡它。第三列和前两列的唯一区别是包含一张带链接的图片，第一列只有无链接的同类图片。我试过移除body背景色，只能消除背景色，解决不了遮挡问题，查了同类问题没找到匹配方案。

Hero Image CSS代码 #

.hero-image {
  background-image: url("https://breakingtheirchains.com/images/images/girl2.png");
  background-color: black;
  height: 800px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

列布局CSS代码 #

/* Create three equal columns that float next to each other */

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: auto;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
/* End column layout */

解决方案 #

问题根源是background-attachment: fixed与堆叠上下文的冲突：带链接的图片（<a>包裹<img>）会触发浏览器为该元素创建新的堆叠上下文，其层级默认高于固定背景的.hero-image，导致遮挡。

方案1：调整列的堆叠层级

给.column添加透明背景和明确的堆叠层级，确保所有列都处于同一层级，不会覆盖固定背景：

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: auto;
  /* 新增样式 */
  background-color: transparent;
  position: relative;
  z-index: 0;
}

方案2：改用position: fixed实现固定背景

替换.hero-image的background-attachment: fixed为固定定位，直接将背景置于内容下方，从根源避免堆叠上下文冲突：

.hero-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://breakingtheirchains.com/images/images/girl2.png");
  background-color: black;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保背景在所有内容下方 */
}

注意：使用此方案时，需给内容容器（如.row）添加足够的margin-top，避免内容被固定背景覆盖。

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