z-index 层叠
z-index 控制叠放顺序、层叠上下文、只对定位元素生效
z-index 层叠
z-index 控制定位元素的叠放顺序——数值大的在上面。
学完本章你将： 掌握 z-index 层叠、层叠上下文、只对定位元素生效。
基本用法
css
.back { position: absolute; z-index: 1; } /* 底层 */
.middle { position: absolute; z-index: 2; } /* 中层 */
.front { position: absolute; z-index: 3; } /* 顶层 */重要规则
css
/* ❌ 非定位元素——z-index 无效 */
div { z-index: 999; } /* 无效！ */
/* ✅ 定位元素才生效 */
div { position: relative; z-index: 10; }层叠上下文
css
.parent {
position: relative;
z-index: 1; /* 创建新的层叠上下文 */
}
.child {
position: absolute;
z-index: 999; /* 999 只在 parent 内部有效 */
}
/* child 可能被其他 z-index:2 的外部元素覆盖 */实用场景
css
/* 模态弹窗——确保在最上层 */
.modal-overlay {
position: fixed;
inset: 0; /* top/right/bottom/left:0 */
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal {
position: fixed;
z-index: 1001; /* 比遮罩高一层 */
}