当使用 position: absolute 定位锚点按钮时，若未显式设置宽高且父容器缺乏明确尺寸约束，按钮可能异常撑满父元素高度；本文提供精准 CSS 修正方案，确保按钮仅包裹内容、精准定位在图片下方而不覆盖图像。

当使用 `position: absolute` 定位锚点按钮时，若未显式设置宽高且父容器缺乏明确尺寸约束，按钮可能异常撑满父元素高度；本文提供精准 css 修正方案，确保按钮仅包裹内容、精准定位在图片下方而不覆盖图像。

在响应式轮播图（carousel）中，常需为每张图片添加一个“Shop Now”操作按钮，并希望它自然地显示在图片正下方（而非叠加在图片底部），同时保持自身尺寸紧凑、不侵占图像空间。但如案例所示，.shop-now 锚点标签默认表现为 display: block 且设置了 position: absolute 后，若未控制其盒模型行为，浏览器会将其渲染为“尽可能高”的块级元素——尤其当父容器 .carousel-cell 仅设 position: relative 而无显式高度时，绝对定位的 <a></a> 元素可能继承或撑满父容器可用高度，导致视觉上“覆盖整张图”。

核心问题根源在于：

• position: absolute 元素在未指定 top/bottom + height 时，其高度由内容决定；但若同时设置了 bottom: 0 和 right: 0 却遗漏了 top 或 height 约束，部分浏览器会将其高度解析为从 bottom: 0 向上延伸至父容器顶部，造成全高覆盖。
• 此外，width: auto 本身正确，但若父容器宽度动态变化而未配合 left/right 边界控制，也可能引发布局不稳定。

✅ 推荐解决方案（精简可靠）：
移除易引发歧义的 bottom: 0 和 right: 0，改用流式布局 + 绝对定位微调，确保按钮脱离文档流后仍精准停靠在图片下方：

.carousel-cell {
  position: relative;
  width: 100%;
  /* 推荐：为图片设置 display: block 防止底部空白 */
}

.carousel-cell img,
.carousel-cell picture {
  display: block;
  width: 100%;
  height: auto;
}

.shop-now {
  display: inline-block; /* 更安全：仅包裹文字内容 */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  padding: 13px 15px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  position: absolute;
  bottom: -40px; /* 向下偏移，确保完全脱离图片区域 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  width: max-content; /* 显式限制宽度为内容所需 */
}

HTML 结构建议补充文本内容与语义化优化：

<div class="carousel-cell">
  <picture><source media="(min-width: 768px)" srcset="hero-desktop.jpg"><img src="hero-mobile.jpg" alt="Product showcase"></source></picture><a class="shop-now" href="/products">Shop Now</a>
</div>

⚠️ 关键注意事项：

• 始终为 <img> 或 <picture></picture> 设置 display: block，避免行内元素默认的基线对齐导致底部多余空白，影响绝对定位基准；
• 避免仅依赖 right: 0 + bottom: 0 定位按钮——这会使按钮贴右下角，而非“图片正下方”；
• 使用 width: max-content 或 inline-block 替代 width: auto，可彻底防止块级锚点无限拉伸；
• 若需支持旧版浏览器，max-content 可回退为 width: fit-content 或显式设定 min-width。

通过以上调整，.shop-now 将稳定呈现为紧凑按钮，精准悬浮于图片下方指定间距处，既符合设计意图，又具备良好可维护性与跨浏览器兼容性。