z-index 控制定位元素的层叠顺序，数值越大越靠前，负值置于背景；margin 调整元素间平面距离，影响布局但不改变层级。两者协同实现复杂效果：如导航下拉菜单用 z-index 提升层级、margin 留白防文字紧贴；卡片堆叠时负 margin 实现重叠、z-index 指定顶层卡片；模态框通过 absolute 定位与 margin: auto 居中，z-index: 1000 确保浮出顶层。掌握二者配合可灵活处理重叠与排列需求。
在CSS中，z-index 和 margin 分别控制元素的层叠顺序和外边距布局，它们作用于不同的维度：z-index 管理“前后”层级，margin 调整“平面”位置。要实现盒模型元素的合理排列，尤其是涉及重叠或层级时，需理解两者如何协同工作。
z-index 控制元素的堆叠顺序
z-index 只对定位元素（即 position 值为 relative、absolute、fixed 或 sticky 的元素）生效。数值越大，元素越“靠前”显示。
常见用法：
- 设置父容器的 z-index 影响整个子元素层级
- 多个重叠卡片、弹窗、下拉菜单常用 z-index 区分前后
- 负值可将元素置于背景层
注意：如果两个元素没有形成层叠上下文冲突，z-index 不会起作用。浏览器按默认文档流顺序堆叠。
立即学习“前端免费学习笔记（深入）”；
margin 调整元素间的平面距离
margin 设置元素的外边距，影响其在页面中的位置，但不会改变层级。它常用于避免元素紧贴或创建视觉间距。
结合定位使用 margin 可微调位置：
- 使用 margin-top 或 margin-left 实现偏移
- 负 margin 可让元素覆盖相邻元素
- auto margin 在块级元素中常用于水平居中
例如，一个 absolute 定位的提示框可通过 margin 微调位置，同时用 z-index 确保不被遮挡。
z-index 与 margin 协同实现复杂布局
当需要元素既重叠又保持可读间距时，两者配合更有效。
典型场景：
- 导航栏下拉菜单：用 z-index 提升菜单层级，避免被内容遮挡；用 margin-bottom 预留空间防止文字紧贴
- 卡片堆叠效果：通过负 margin 让卡片部分重叠，再用 z-index 控制哪张在最上层
- 模态框居中：absolute 定位 + margin: auto 实现居中，z-index: 1000 确保浮出页面顶层
示例代码：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0; /* margin 自动居中配合定位 */
z-index: 1000; /* 浮于其他内容之上 */
}
.tooltip {
position: absolute;
top: 100%;
margin-top: 4px; /* 与触发元素保持间距 */
z-index: 999; /* 略低于模态框但高于普通内容 */
}
基本上就这些。掌握 z-index 的层叠规则和 margin 的空间控制，就能灵活处理大多数重叠与排列需求。
