本文介绍通过 css 的绝对定位与相对定位结合、配合动态计算间距的方式，解决响应式布局中按钮随视口缩放而偏移的问题，确保按钮始终稳定显示在卡片底部指定区域。
在响应式设计中，按钮“随屏幕缩放而移动位置”通常是由于其依赖的父容器高度变化（如使用固定 height: 450px）、或子元素采用常规流式布局（如 padding-top: 6rem）导致的——这类值在不同视口下无法维持视觉一致性。你当前代码中 .btnBox { padding-top: 6rem } 是典型问题根源：rem 基于根字体大小，不随容器尺寸自适应；而 .wrapper 的固定高度 450px 又限制了内部弹性空间，使按钮无法锚定到稳定参考点。
✅ 正确解法是：将按钮脱离文档流，用 position: absolute 锚定在卡片（.sedan/.suv/.luxury）的底部安全区，同时让卡片自身成为 position: relative 的定位上下文。关键在于避免硬编码像素值，改用 CSS 自定义属性 + calc() 实现可维护的垂直留白。
以下是优化后的核心 CSS 片段（替换原 .wrapper 和 .btnBox 相关规则）：
.wrapper {
height: auto; /* 移除固定高度，允许内容自然撑开 */
min-height: 450px; /* 保留最小高度保障基础布局 */
}
.wrapper > div {
position: relative; /* 为绝对定位的按钮提供参照容器 */
box-sizing: border-box;
/* 动态预留底部空间：100px（图标+标题+文本所需高度）+ 按钮高度（35px） */
--size: 100px;
padding-bottom: calc(var(--size) + 35px);
}
.btnBox {
position: absolute;
left: 15%; /* 与卡片左右 padding 一致，保持水平对齐 */
bottom: var(--size); /* 按钮上边缘距卡片底边 100px，形成稳定视觉间隙 */
width: fit-content; /* 避免按钮宽度撑满，确保居中逻辑有效 */
}? 注意事项与增强建议：
- left: 15% 依赖于 .sedan 等卡片的 padding: 12% 15% ...，若后续调整内边距，请同步更新 left 值；
- 如需按钮完全水平居中，可改用 left: 50%; transform: translateX(-50%);；
- 若希望按钮在小屏下更紧凑，可结合媒体查询微调 --size，例如：
@media (max-width: 768px) { .wrapper > div { --size: 80px; } } - 始终确保 .btnBox 的父元素（即 .sedan 等）设置了 position: relative —— 这是绝对定位生效的前提。
通过以上调整，按钮将不再随视口缩放“漂移”，而是牢固吸附在每张卡片底部预留的安全区域内，兼顾响应性与视觉稳定性。
