本文讲解如何通过 css 的绝对定位与相对定位结合，配合自定义属性和 `calc()` 函数，确保按钮在不同屏幕尺寸下始终锚定在卡片底部指定位置，避免因 flex/grid 布局重排或内容高度变化导致的位移。
在响应式设计中，按钮“随屏幕缩放而移动位置”通常不是因为 position: relative 本身失效，而是因为其父容器未建立定位上下文，且子元素缺乏明确的定位锚点。你当前的 .btnBox 仅靠 padding-top: 6rem 实现垂直间距，但该值是相对于内容流的静态内边距，在网格项（.sedan/.suv/.luxury）高度因字体、行高或视口变化而波动时，按钮自然会“漂移”。
要真正固定按钮位置（例如始终位于卡片底部上方 35px 处），需采用 “相对定位父容器 + 绝对定位子元素” 的经典组合：
✅ 正确解法：构建定位锚点
首先，为每个卡片（.sedan, .suv, .luxury）设置 position: relative，使其成为 .btnBox 的定位参考容器：
.wrapper > div {
position: relative;
box-sizing: border-box;
/* 为绝对定位的按钮预留底部空间 */
padding-bottom: calc(100px + 35px); /* --size + button height */
}接着，将 .btnBox 脱离文档流，用 position: absolute 精确锚定：
.btnBox {
position: absolute;
left: 15%; /* 与原 padding-left 一致，保持水平对齐 */
bottom: 100px; /* 距离卡片底部 100px（即 --size） */
}? 为什么是 bottom: 100px？ 因为 padding-bottom: calc(100px + 35px) 中的 100px 是预留的空白区域高度，35px 是按钮自身高度。bottom: 100px 恰好让按钮上沿紧贴该空白区顶部，视觉上稳定停驻在内容末尾下方固定距离处。
? 同时优化容器健壮性
为防止小屏幕下卡片高度塌陷导致按钮被裁切，建议将 .wrapper 的固定高度 height: 450px 改为弹性约束：
.wrapper {
min-height: 450px; /* 保证最小高度，但允许内容撑开 */
height: auto; /* 避免强制截断 */
}? 完整推荐样式（整合进你的 CSS）
/* 替换原有 .wrapper 和 .btnBox 规则 */
.wrapper {
min-height: 450px;
height: auto;
}
.wrapper > div {
position: relative;
box-sizing: border-box;
padding-bottom: calc(100px + 35px); /* 预留底部空间 */
}
.btnBox {
position: absolute;
left: 15%;
bottom: 100px;
margin: 0; /* 清除可能的默认外边距 */
}
/* 可选：增强按钮居中兼容性（若需水平居中） */
.sedan .btnBox,
.suv .btnBox,
.luxury .btnBox {
left: 50%;
transform: translateX(-50%);
}⚠️ 注意事项
- 避免滥用 !important：确保没有其他规则（如全局 * { position: static !important }）覆盖 position: relative/absolute。
- 检查父级溢出：.wrapper 已设 overflow: hidden，若按钮超出卡片范围会被裁剪——此时应调整 padding-bottom 或 bottom 值。
-
移动端适配：小屏幕下 15% 的 left 值可能过窄，可添加媒体查询微调：
@media (max-width: 768px) { .btnBox { left: 10%; } }
通过此方案，按钮不再依赖流式布局的不可控间距，而是严格绑定于卡片容器的物理边界，真正实现“位置恒定”，无论屏幕如何缩放、字体如何缩放、内容如何增减。
