为何我的元素无法正确继承父元素的宽度？

嘿，这个问题我太熟悉啦！让我给你拆解一下问题出在哪，以及怎么解决～

问题根源 #

你遇到的核心问题是绝对定位元素的“包含块”没设置对：

• 当你给#semi-trans设置position: absolute时，它会默认找最近的、设置了position: relative/absolute/fixed/sticky的祖先元素作为定位参考（也就是“包含块”）。
• 现在你的.img-container没有设置任何position属性，所以#semi-trans其实是相对于整个浏览器视口来计算尺寸和位置的，这就导致它的宽度根本不是继承父元素的，自然就和背景图对不齐了。

解决方案 #

只需要两步就能搞定：

1. 给父容器.img-container添加定位上下文
2. 调整#semi-trans的宽度属性（可选但更直观）

修改后的完整代码如下：

CSS 代码

.img-container {
  /* EDIT for code snippet */
/*  background-image: url(images/sparkle.jpg); */
  background-image: url(https://placebear.com/500/500.jpg);
  width: clamp(500px, 800px, 1100px);
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 12px;
  position: relative; /* 新增：让子元素的绝对定位以它为参考 */
}

#semi-trans {
  position: absolute;
  background-color: black;
  opacity: 0.5;
  width: 100%; /* 改用100%，直观占满父容器宽度 */
  height: 80px;
  z-index: 10;
  bottom: 12px; /* 可选：因为父容器有padding-bottom，加这个让它和背景图底部对齐 */
}

HTML 代码（无需修改）

<div class="img-container">
  <img src="images/odin-lined.png" alt="Odin Project logo">
  <p>ODIN</p>
  <div id="semi-trans"></div>
</div>

额外说明 #

• 为什么不用width: inherit？
  在设置了position: relative的父容器下，width: inherit其实也能生效，但width: 100%更直观，能明确表达“我要占满父容器的整个宽度”的意图。
• 关于bottom:12px：
  因为你的父容器有padding-bottom:12px，如果不加这行，#semi-trans会默认定位在父容器内容区的底部（也就是padding之上），加上之后就能让它和背景图的底部完全对齐啦。

备注：内容来源于stack exchange，提问作者Riis