本文讲解如何通过 css 的绝对定位与相对定位配合，结合动态计算（如 `calc()` 和 css 自定义属性），使按钮在屏幕缩放时始终锚定在卡片底部固定区域，避免因内容高度变化导致位置偏移。
在响应式设计中，按钮“随屏幕缩放而移动”通常并非因为 position: relative 本身失效，而是因为其父容器高度不稳定、子元素依赖流式布局（如 padding-top）或未建立明确的定位上下文。您当前代码中 .btnBox 使用 padding-top: 6rem，该值是相对于父元素内容区计算的，而 .sedan/.suv/.luxury 高度由 grid 分配且内容长度不一，导致按钮垂直位置浮动。
✅ 正确解法是：为每个卡片（.sedan, .suv, .luxury）建立独立的定位上下文，并将按钮绝对定位到预期位置。以下是推荐实现：
✅ 关键 CSS 修改（替换原 .wrapper 和 .btnBox 规则）
.wrapper {
height: auto; /* 移除固定 height，避免截断 */
min-height: 450px; /* 保留最小高度保障视觉一致性 */
}
.wrapper > div {
position: relative; /* 创建定位上下文，使内部 absolute 元素以此为基准 */
box-sizing: border-box;
/* 为按钮预留底部空间：100px 高度（含按钮自身 + 底部间距） */
--btn-reserve: 100px;
padding-bottom: calc(var(--btn-reserve) + 35px); /* 35px = .button height */
}
.btnBox {
position: absolute;
left: 15%; /* 与原 padding-left 一致，保持水平对齐 */
bottom: var(--btn-reserve); /* 精确控制按钮距底边距离 */
margin: 0; /* 清除默认外边距干扰 */
}? 为什么这样有效？
- position: relative 在 .wrapper > div 上启用后，其子元素（.btnBox）设置 position: absolute 即以该卡片为参考系定位；
- bottom: var(--btn-reserve) 将按钮稳定锚定在卡片底部向上 100px 处，不受上方段落行高、标题大小等影响；
- padding-bottom 预留足够空间，防止按钮被裁剪或重叠内容；
- 使用 CSS 自定义属性 --btn-reserve 提升可维护性，便于统一调整。
⚠️ 注意事项
- 确保 .btnBox 内无其他 margin 或 padding 干扰定位（建议显式重置：margin: 0; padding: 0;）；
- 若后续需支持多语言（文本长度差异大），可考虑用 flexbox 替代 padding-bottom 预留空间，但本方案已兼顾简洁性与兼容性（支持 IE11+）；
- 避免在 .button 上设置 margin-top 或 margin-bottom —— 绝对定位元素的外边距不影响文档流，仅可能干扰自身尺寸计算。
✅ 最终效果
无论屏幕宽度如何变化、各卡片内文本换行多少行，按钮始终稳定位于卡片底部、水平居左 15% 处，高度与背景色严格对齐，真正实现「视觉位置锁定」。
通过理解定位上下文与空间预留机制，您不仅能解决当前问题，更能系统性应对各类响应式锚点定位需求。
