“已定位祖先元素”指 position 值为 relative、absolute、fixed 或 sticky 的最近祖先；若无，则以初始包含块（通常是视口左上角）为参照；z-index 仅在同一定位上下文中生效。
绝对定位（position: absolute）的元素，会脱离文档流，并以最近的已定位祖先元素为参照物进行定位；如果没有这样的祖先，则以初始包含块（通常是视口）为参照。
什么是“已定位祖先元素”？
这里的“已定位”，指的是该祖先元素的 position 值为 relative、absolute、fixed 或 sticky（不能是 static，因为 static 是默认值，不构成定位上下文）。
- 只要父级或更上层某个祖先设置了 position: relative（哪怕没写 top/left），它就成为绝对定位子元素的定位参照物
- 如果多个祖先都已定位，浏览器会取离自己最近的那个作为参照
- 常见误区：以为必须是直接父元素——其实不一定是父级，可能是爷爷、曾祖父……只要最近且已定位即可
为什么加了 position: relative 的父容器很常用？
因为 relative 不改变元素原本位置，却能创建新的定位上下文，让子元素的 absolute 定位“锚定”在它内部，而不是跑到整个页面去。
- 例如：一个卡片组件内有关闭按钮，希望右上角固定显示 → 给卡片设 position: relative，按钮设 position: absolute; top: 8px; right: 8px
- 若不加 relative，按钮可能相对于 body 定位，导致偏移不可控
- relative 本身不触发脱离文档流，不影响布局，所以非常安全好用
初始包含块（initial containing block）是什么？
当元素没有已定位祖先时，absolute 就以这个“根参照物”为准。在大多数情况下：
立即学习“前端免费学习笔记（深入）”；
- 它是视口大小（viewport），即浏览器窗口的左上角（0,0）为原点
- 它的尺寸通常等于 html 元素的 width/height，但受 zoom、滚动、设备缩放等影响
- 注意：不是 ，也不是 —— 虽然常和它们重合，但规范中它是独立概念
z-index 和定位上下文的关系
z-index 只在同一个定位上下文中生效。也就是说：
- 两个 absolute 元素若属于不同已定位祖先，它们的 z-index 互不干扰
- 父级设置了 z-index，会影响其内部所有后代的层叠顺序（形成新的层叠上下文）
- 想控制跨区域层级？得统一它们的定位上下文，或调整祖先的 z-index 层级
