position取值决定层叠行为：static无视z-index；relative/absolute/fixed/sticky需配z-index才生效；fixed相对视口，absolute相对最近已定位祖先；z-index仅在同层叠上下文中有效，opacity
position 属性的取值差异直接影响层叠行为
不是所有 position 值都会触发层叠上下文（stacking context），这点常被忽略。只有 position: relative、position: absolute、position: fixed 和 position: sticky 配合 z-index 才能参与显式层叠控制；而 position: static（默认值）完全无视 z-index，哪怕写了也无效。
常见错误是给一个 div 设置了 z-index: 999 却没加 position，结果毫无层叠效果。必须成对出现：
.modal {
position: absolute;
z-index: 1000;
}
另外，position: fixed 会脱离文档流并相对于视口定位，而 position: absolute 是相对于最近的「已定位祖先」（即 position 不为 static 的父元素）。若祖先没设 position，就会一路向上找到 。
z-index 不是全局数字比大小，而是按层叠上下文分组计算
z-index 只在同一个层叠上下文中起作用。一旦父元素创建了新的层叠上下文（比如设置了 opacity: 0.99、transform: translateZ(0)、will-change: transform 或 filter: blur(1px)），其子元素的 z-index 就只在这个新上下文内比较，不再和外部兄弟元素直接竞争。
- 父容器 A：
z-index: 10，且触发了层叠上下文（如加了opacity: 0.99） - 子元素 A-1：
z-index: 9999 - 兄弟容器 B：
z-index: 20（无其他触发条件）
此时 A-1 永远压不住 B——因为 A 的整个层叠上下文（含 A-1）整体排在 B 下面。这是最常导致“明明 z-index 很大却盖不住”的根本原因。
如何主动创建或避免意外的层叠上下文
有些 CSS 属性会在不声明 position 的情况下悄悄创建层叠上下文，干扰预期布局。比如：
-
opacity小于 1（哪怕是0.999） -
transform有值（包括translateX(0)） -
filter有值（哪怕filter: none以外的任意值） -
will-change设为transform、opacity等 isolation: isolate
调试时可借助浏览器开发者工具的「Layers」面板（Chrome）或「Computed」中查看「Stacking Contexts」，确认某元素是否意外成了层叠根节点。若需保留样式但不想创建上下文，可考虑用 transform: translateZ(0) 替代 transform: translateY(0)（后者会创建上下文，前者不会，除非父级已有）。
sticky 定位的层叠行为与滚动边界强相关
position: sticky 表现像 relative 和 fixed 的混合体，但它是否“粘住”、何时“粘住”，取决于其**最近的滚动祖先容器**（即设置了 overflow: auto/scroll 且有高度限制的父元素）以及 top/bottom 偏移值。
关键点：
- 它不会脱离文档流，所以原始占位仍在，不影响其他元素布局
- 它的层叠层级由其所在 DOM 位置决定，
z-index仅在其当前层叠上下文中生效 - 如果 sticky 元素的父容器本身是
position: relative且设置了z-index，那 sticky 元素的层叠顺序就受该父容器约束
典型陷阱：在 overflow: hidden 的容器里用 sticky，它根本不会粘——因为没有滚动行为，sticky 退化为 relative。
z-index，而在于理解谁和谁在一个上下文里、谁把谁“框死”了。动手前先看一眼父级有没有无意中触发层叠上下文，比反复调数字更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
