正在加载...

CSS z-index

Position 课把盒子放好了。z-index 回答下一个问题：两个盒子重叠时，谁更靠近读者？想象桌面上的纸张——上面的盖住下面的。先学会日常规则，再去发明巨大数字。

z-index 工具箱

📊 z-index 一览

概念 日常作用
z-index 在同一 stacking context 内设定重叠兄弟的绘制顺序
先定位 通常需要非 static 的 position（或某些现代布局子项）
数值越大越上 更大的整数更晚绘制——显示在上层
auto 默认——遵循文档顺序与父级上下文规则
Stacking context 一只「笼子」——子元素彼此比较，而不是和整页比
克制刻度 小步数值（1、2、10）与命名角色，而不是 9999 竞赛

z-index 不会把盒子左右移动。它只在盒子已经共享同一屏空间时，改变谁盖住谁。

把徽章抬到卡片之上

给卡片一个定位的「家」，再用适中的 z-index 抬起徽章。仅靠兄弟顺序有时够用，但显式层级让意图可读。

卡片上的徽章

css 
.card {
position: relative;
}

.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}

盖在页面之上的遮罩

模态框与抽屉通常压在普通内容之上。把定位遮罩配上清晰的层号——并有意把页面内容放得更低。

页面上的模态框

css 
.page {
position: relative;
z-index: 1;
}

.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}

比较兄弟，不要比较整个世界

在同一上下文的兄弟之间，更高的 z-index 获胜。数值相同时，DOM 中较晚的兄弟通常画在上面。先在一个父级内比较，再去追逐整页战争。

堆叠的兄弟卡片

css 
.stack {
position: relative;
}

.stack .card-a {
position: absolute;
z-index: 1;
}

.stack .card-b {
position: absolute;
z-index: 2;
}

Stacking context 会困住子元素

拥有自己 stacking context 的父级（例如已定位 + z-index）可能困住子元素。若父级本身更低，子元素即使是 z-index: 999 也无法跳出该父级去压过外面的兄弟。修父级层级——不要只把子元素吹大。

上下文笼子

css 
.panel {
position: relative;
z-index: 1;
}

.panel .popup {
position: absolute;
z-index: 999;
}

.toast {
position: fixed;
z-index: 5;
}

克制的 z-index 习惯

给角色命名（--layer-badge、--layer-modal）或使用小刻度。除非调试，避免 99999。记住：放置是 position；分层是 z-index；float 清除留给后续课程。

命名的层级角色

css 
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}

.badge {
position: absolute;
z-index: var(--layer-badge);
}

.modal {
position: fixed;
z-index: var(--layer-modal);
}

自己动手

  1. 在 relative 卡片上放 absolute 徽章，并设置 z-index: 2。
  2. 做固定背景/模态框，z-index: 10，页面内容为 1。
  3. 给两个重叠的 absolute 兄弟不同的 z-index，再互换。
  4. 把高 z-index 子元素嵌进低 z-index 父级——观察笼子。
  5. 把某个「9999」改写成命名自定义属性刻度。

常见错误

  • 指望普通 static 盒子上的 z-index 能重排一切
  • 只抬高嵌套子元素来对抗 stacking context
  • 用 99999 竞赛而不是可读刻度
  • 把本课当成 Position（放置）或 Display（盒子类型）
  • 用 z-index 硬造页面分栏，而不是布局工具

小结

  • 盒子重叠时，z-index 控制谁画在上面
  • 通常需要非 static 的 position（或特殊布局情形）
  • 在同一 stacking context 内，较大值获胜
  • 父级上下文可能困住子元素——修对层级
  • 优先使用小而命名的刻度；float 留给后续课程

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 38 的 48
Css 教程