本文详解如何通过合理设置容器尺寸与子元素定位，使两张图片在卡片内精准层叠（z-index 有效），避免溢出卡片边界，确保卡片样式（如 padding、border、阴影等）正常生效。
本文详解如何通过合理设置容器尺寸与子元素定位，使两张图片在卡片内精准层叠（z-index 有效），避免溢出卡片边界，确保卡片样式（如 padding、border、阴影等）正常生效。
在使用 position: absolute 和 z-index 叠放多张图片时，一个常见误区是：仅给绝对定位的子元素（如 .cards）设置宽高，却未为父容器（.card）定义明确的尺寸和定位上下文。这会导致子元素脱离文档流后，以最近的「已定位祖先元素」为参考进行定位；若 .card 本身没有设置 position: relative 或固定尺寸，浏览器将默认以 <body> 为定位根，造成图片“飘出卡片”——正如问题中截图所示。
✅ 正确做法是：
- 为 .card 设置明确的尺寸（推荐 px 或 rem 单位）和 position: relative，为其创建独立的定位上下文；
- 将子图片设为 position: absolute，宽高设为 100%（或按比例缩放），使其严格受限于卡片边界；
- 通过 top/right/z-index 精确控制层叠顺序与偏移位置。
以下是优化后的完整代码示例：
.card {
/* 关键：设置明确尺寸 + 创建定位上下文 */
width: 570px;
height: 560px;
position: relative; /* 必须！否则 absolute 子元素会脱离卡片 */
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden; /* 可选：防止意外溢出 */
}
.cards {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 保持比例，避免拉伸 */
}
.iphone1 {
z-index: 1;
/* 可微调偏移，但始终在卡片内 */
}
.mobile {
z-index: 2;
top: 90px;
right: 190px;
width: 190px; /* 可设为具体像素或百分比 */
height: auto; /* 配合 object-fit 自动适配 */
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}<div class="card iphone col-md-12 col-lg-6 ml-auto pt-3"> <img src="../../../assets/iphone screen.png" class="iphone1 cards" alt="iPhone frame"> <img src="../../../assets/mobile_screenshot.png" class="mobile cards" alt="App screenshot"> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 fit-content 作为 .card 的宽高——它无法为 absolute 子元素提供稳定参考；
- 所有 top/right 偏移值均基于 .card 的左上角（因设置了 position: relative），而非整个页面；
- 若需响应式适配，建议用 max-width + aspect-ratio 替代固定像素，再配合媒体查询调整图片尺寸；
- 使用 object-fit: contain 或 cover 可确保图片在缩放时不畸变。
总结：卡片内叠图的核心 = 显式尺寸 + position: relative 父容器 + absolute 子元素 + 百分比/相对单位控制布局。掌握这一模式，即可稳定复用在 Banner、产品预览、UI 演示等各类卡片场景中。
