本文详解如何通过合理设置父容器尺寸与子元素定位，使两张图片在卡片内精准层叠（z-index 有效），避免溢出卡片边界，确保卡片样式（如 padding、border、阴影等）正常生效。
本文详解如何通过合理设置父容器尺寸与子元素定位，使两张图片在卡片内精准层叠（z-index 有效），避免溢出卡片边界，确保卡片样式（如 padding、border、阴影等）正常生效。
在使用 position: absolute 和 z-index 叠放多张图片时，一个常见误区是：仅给子元素（如 ）设置宽高和定位，却忽略父容器（.card）的尺寸约束与定位上下文。这会导致绝对定位的图片脱离文档流后，以最近的「已定位祖先元素」为参考进行定位；若 .card 本身未设置明确尺寸且未声明 position: relative，浏览器会默认以
✅ 正确做法是：
- 为 .card 设置明确的宽高（推荐像素值或固定比例），并添加 position: relative —— 这将创建新的定位上下文，使内部 absolute 元素相对于卡片自身定位；
- 移除子图片的固定像素宽高，改用 width: 100%; height: 100%（或按需使用百分比缩放），使其自适应父容器；
- 统一管理层级：通过 z-index 控制叠放顺序，确保高 z-index 的图片显示在上层。
以下是优化后的完整代码示例：
.card {
position: relative; /* 关键：创建定位上下文 */
width: 570px; /* 明确宽度（与 iphone1 图匹配） */
height: 560px; /* 明确高度（与 iphone1 图匹配） */
margin: 0 auto;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cards {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 保持比例，避免拉伸 */
}
.iphone1 {
z-index: 1;
/* 不再设 top/right —— 默认覆盖全卡背景 */
}
.mobile {
z-index: 2;
top: 90px; /* 相对于 .card 定位 */
right: 190px; /* 注意：right 是从卡片右边界向左偏移 */
width: 190px; /* 可保留具体像素控制大小 */
height: auto; /* 高度随宽高比自动计算 */
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
<div class="card iphone col-md-12 col-lg-6 ml-auto pt-3"> @@##@@ @@##@@ </div>
⚠️ 注意事项：
- 若需响应式适配，可将 .card 宽高改为 max-width: 570px; aspect-ratio: 570/560;，配合 width: 100% 实现等比缩放；
- object-fit: contain 比直接设 height/width 更安全，防止图片变形；
- 避免在 .cards 上同时使用 height: 100% 和 height: 400px —— CSS 会以最后声明为准，易引发冲突；
- 所有 top/right/bottom/left 值均以 .card 边框内侧为基准，务必确认父容器 padding 是否影响可视位置。
总结：卡片内的层叠布局 = 父容器显式尺寸 + position: relative + 子元素 position: absolute + 百分比/弹性尺寸控制。掌握这一组合，即可稳定实现任意图层叠加，同时完全继承卡片的样式能力（如圆角、阴影、响应式断点等）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
