如何定位.valorCard div覆盖图片底部且不遮挡下方section？

问题核心是绝对定位元素脱离文档流：你给.valorCard设置absolute后，它不再占据正常文档流空间，#valorContent的高度仅计算图片高度，不会包含.valorCard超出图片底部的部分，导致下方section向上偏移被遮挡。

直接用以下两种方法就能解决：

方法1：给父容器加padding-bottom #

给#valorContent设置padding-bottom，数值等于.valorCard超出图片底部的高度，让容器预留出卡片占用的空间，下方section会自动被推到卡片下方。

示例代码：

#valorContent {
  position: relative;
  /* 关键：预留卡片超出的空间 */
  padding-bottom: 40px; /* 假设卡片超出图片底部40px */
}

.valorCard {
  position: absolute;
  bottom: -40px; /* 卡片超出图片底部40px */
  /* 其他样式示例 */
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 1rem;
}

方法2：给下方section加margin-top #

如果不想修改父容器样式，也可以给第二个section设置margin-top，值等于.valorCard超出图片底部的高度，强制让它避开卡片区域。

示例代码：

.second-section {
  margin-top: 40px; /* 和卡片超出的高度一致 */
}

注意事项 #

• 优先用方法1，父容器是卡片的定位依托，逻辑上更合理，也不会影响其他元素布局。
• 要精准计算超出高度：比如.valorCard的bottom值是-3rem，对应的padding-bottom或margin-top就设为3rem。

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