position: relative能作为absolute定位参考系，是因为css规范规定absolute元素的包含块是最近的非static定位祖先，而relative是最轻量且不脱离文档流的非static值，其padding box左上角即为定位原点。
必须给父元素显式设置 position: relative，否则子元素的 position: absolute 会向上寻找最近已定位祖先，甚至落到视口上。
为什么父元素设 position: relative 就能当参考系？
因为 CSS 规范定义：position: absolute 元素的“包含块”（containing block）是**最近的非 static 定位祖先**。而 relative 是最轻量、最常用的非 static 值——它不移动元素（若不设偏移），也不脱离文档流，但已满足“已定位”条件。
常见误操作：
- 只写 top/left 却漏掉 position: relative → 父元素仍是 static，不起作用
- 给父元素加了 relative，但没设宽高或 overflow → 子元素可能溢出不可见
position: relative 父容器下 absolute 子元素的定位基准
子元素的 top/left 等值，是以父元素的 **padding box 左上角**为原点计算的（即内容区左上角，含 padding，不含 border）。不是 margin 边缘，也不是 content box。
- 若父元素有
padding: 20px，子元素top: 0; left: 0会紧贴 padding 内边缘，而非 border 内侧 - 若父元素有
border: 5px solid #000，不影响子元素定位起点（起点仍在 padding box） - 父元素若设
transform（如scale(1.2)），不会改变该定位基准 ——transform不影响包含块
网格布局中尤其容易踩坑：网格项默认不是定位上下文
在 display: grid 容器里，每个网格项（.grid-item）默认是 position: static。哪怕它被分配到第 3 行第 2 列，内部的 position: absolute 子元素仍会以整个 grid 容器为参考，而不是这个网格单元。
解决方法只有一行：
.grid-item { position: relative; }
不需要 wrapper、不改 HTML 结构、不加额外 class —— 仅此一行，就能让子元素的 top: 0; right: 0 对齐该网格项右上角。
注意：
- 不要给整个 grid 容器设 relative，那会让所有绝对定位子元素都对齐容器，失去单元粒度控制
- 若网格项本身有 align-self 或 justify-self，不影响其作为包含块的能力
z-index 和层叠上下文的隐性依赖
position: relative 是启用 z-index 的最小前提。没有它，z-index 在子元素上无效或行为不可控。
但要注意：
- 父元素设 position: relative + z-index: 1，会创建新的层叠上下文
- 此时子元素的 z-index 只在该上下文中生效，无法越过父级去和外部兄弟元素比高低
- 如果只是想让子元素浮在父元素上方，通常只需父元素设 relative，子元素设 absolute 即可；显式设 z-index 往往是为了解决更复杂的重叠层级问题
真正容易被忽略的是：relative 不等于“安全”，它只是定位链的第一环。一旦父元素没宽高、没边界约束、或被 transform/clip-path 影响，absolute 子元素就可能消失、错位或触发意外层叠。动手前先确认父元素的盒模型是否稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
