position属性决定元素是否可定位，z-index控制其在Z轴上的堆叠顺序，且仅对已定位元素生效；实际应用中，通过设置fixed或absolute配合z-index值实现导航栏、模态框、下拉菜单等层级布局，需注意堆叠上下文影响及合理分层管理z-index数值。
在网页布局中，position 和 z-index 是控制元素层级和定位的关键属性。它们经常一起使用，尤其是在需要实现重叠、弹窗、下拉菜单或固定导航栏等视觉效果时。
position 与 z-index 的基本关系
position 决定元素是否可以被定位，而 z-index 控制该元素在 Z 轴（垂直于屏幕）上的堆叠顺序。但 z-index 只对已定位元素（即 position 值为 relative、absolute、fixed 或 sticky）起作用。
常见规则：
- 默认情况下，所有元素的 z-index 为 auto，堆叠顺序由 HTML 结构决定（后出现的元素在上层）
- 设置了 position 且赋予 z-index 值的元素，会根据数值大小决定层级：数值越大，越靠前
- z-index 支持负值，负值元素会显示在正常流元素之下
实际应用场景示例
以下是一些常见的结合使用方式：
立即学习“前端免费学习笔记（深入）”；
1. 固定顶部导航栏始终在最上层
当页面滚动时，希望导航栏不被内容遮挡：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* 确保在其他内容之上 */
}
2. 模态框（弹窗）覆盖页面
弹窗需要挡住页面其他部分，同时背景半透明遮罩防止交互：
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; / 高于遮罩 /
background: white;
padding: 20px;
}
3. 下拉菜单层级管理
避免下拉菜单被其他模块遮挡：
.nav-item {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 10; / 确保出现在兄弟元素之上 /
}
注意事项与常见问题
虽然用法简单，但容易踩坑：
- 没有设置 position，z-index 不生效 —— 必须先定位元素
- 父元素形成堆叠上下文后，子元素的 z-index 只在该父容器内有效
- 两个同级元素比较 z-index 时，遵循“就近原则”，数值高的优先
- 避免随意使用极大 z-index 值（如 9999），建议分层管理（如 10/100/1000）
基本上就这些。只要理解 position 是前提，z-index 是控制层级的工具，再注意堆叠上下文的影响，就能准确控制页面元素的前后关系。
