为何background属性未仅作用于父容器？校园模块样式异常求助

问题场景 #

跟着教程制作大学网站的校园板块时，给.layer设置橙色半透明背景想覆盖图片，结果背景铺满了整个页面，而非仅覆盖图片区域。原本预期absolute定位会相对于.campus-col生效，但实际不符合预期。

问题原因 #

.campus-col的position属性设置错误：你写的是position: 30px;，这是完全无效的CSS值。absolute定位的元素会向上寻找最近的**非static定位（即position值为relative/absolute/fixed/sticky）**的父元素作为定位参照，默认情况下父元素的position是static，所以.layer会以页面根元素（<html>）为参照，导致铺满整个页面。

解决方案 #

将.campus-col的position属性修改为relative，这样.layer的absolute定位就会以.campus-col为容器，仅覆盖它的范围。

修正后的代码 #

CSS代码 #

.campus-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative; /* 修正这里，把无效的30px改成relative */
  overflow: hidden;
}

.campus-col img {
  width: 100%;
}

.layer {
  background: rgba(226, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

HTML代码 #

<div class="row">
  <div class="campus-col">
    <img src="https://www.pngall.com/wp-content/uploads/10/London-Transparent-PNG.png">
    <div class="layer">
      <h3>LONDON</h3>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Gaurav Abhiman Mahajan