绝对定位按钮表现异常，无法与其他绝对定位元素正常布局

问题诊断 #

你当前的核心问题是给<p>和.button-container都设置了position: absolute，这会让它们脱离正常文档流，不再遵循默认的上下排列逻辑，因此必须依赖硬编码的top/bottom属性才能调整位置。

解决方案 #

只需要让.banner-content保持position: absolute（用于定位整个内容块在Banner中的位置），内部的<h2>、<p>、.button-container全部移除position: absolute，让它们在.banner-content内部遵循正常文档流布局即可。按钮本身的position: relative是为伪元素提供定位基准，完全不需要抵消，不会影响正常流布局。

修改后的代码 #

CSS代码

.promo-banner {
  position: relative;
  /* 设置与图片一致的宽高，避免容器塌陷 */
  width: 1440px;
  height: 671px;
}
.promo-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.promo-banner .banner-content {
  position: absolute;
  padding-top: 222px;
  padding-left: 56px;
  /* 确保内容层在图片上方 */
  z-index: 1;
}
.promo-banner h2 {
  font-size: 44px;
  margin-bottom: 24px;
  color: white;
  font-style: italic;
}
.promo-banner h2 span {
  font-size: 44px;
  padding-top: 8px;
  font-style: normal;
}
.promo-banner p {
  /* 移除absolute定位，恢复正常流 */
  font-size: 16px;
  color: white;
  margin-bottom: 24px;
}
.promo-banner .button-container {
  /* 移除absolute定位，恢复正常流 */
}
.promo-banner .link-btn {
  position: relative;
  color: green;
  background-color: transparent;
  font-size: 16px;
  border: 0;
  padding: 0;
}
.promo-banner .link-btn span {
  font-size: 16px;
  padding-right: 12px;
  padding-bottom: 4px;
}
.promo-banner .link-btn span::after {
  position: absolute;
  content: '';
  border-bottom: 2px solid green;
  width: 80%;
  bottom: 0;
  left: 0;
}

HTML代码

<div class="promo-banner">
  <img src="../../assets/images/promo-banner.png" alt="Promo banner" />
  <div class="banner-content">
    <h2>
      My content<span>that displays on an image</span>
    </h2>
    <p>
      A magnificent piece of copy with a button below..
    </p>
    <div class="button-container">
      <button type="button" class="link-btn">
        <span>Button link</span>
      </button>
    </div>
  </div>
</div>

额外说明 #

1. 给.promo-banner设置固定宽高，避免因图片绝对定位导致容器塌陷，保证布局稳定性；
2. 图片设置width:100%; height:100%，自适应容器大小，比硬编码px更灵活；
3. 内部元素恢复正常流后，margin-bottom可正常生效，自动控制元素间距，无需手动偏移。

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