要使absolute子元素相对于父元素定位，必须给父元素显式设置position: relative；否则absolute元素将向上查找最近的已定位祖先，找不到则相对于视口定位。
relative父元素是absolute子元素的定位锚点
只要父元素设了 position: relative，它就会成为内部 position: absolute 子元素的“最近已定位祖先”，子元素的 top、right、bottom、left 就全按这个父容器的边界算起——不是页面左上角，也不是 body，就是它自己那块内容区域的四边。
这和没设 relative 完全不同：没设时，absolute 会一路往上找，直到 html 或 body；设了，就“落地”到当前父级，行为可控。
- 父元素必须显式声明
position: relative（哪怕不写top/left），否则不构成定位上下文 -
relative父元素本身仍在文档流中，高度/宽度照常撑开，不影响其他兄弟元素布局 - 如果父元素没设宽高，
absolute子元素可能溢出或定位失准——尤其当内容为空或仅含 inline 元素时
relative偏移不影响absolute子元素的参考位置
给 relative 父元素加 top: 20px，它视觉上往下挪了，但它的“定位边界”还是原来那个框——absolute 子元素依然以它未偏移前的内容区四边为基准定位。
换句话说：relative 的偏移只改自己“站哪儿”，不改“坐标系原点”。这个特性很关键，否则弹窗贴着按钮右下角时，按钮一动，弹窗就飘了。
- 子元素
top: 0; left: 0永远对应父元素内容区左上角（不含 padding 和 border） - 若父元素有
padding，子元素top: 0会紧贴 padding 区内侧，不是 border 边缘 - 用
transform: translateY(20px)替代top: 20px也不会影响子元素定位，因为 transform 不触发新 containing block
常见翻车场景：父元素没设relative或隐式创建了新containing block
最典型错误是写了 .popup { position: absolute; top: 0; right: 0; }，但忘了给按钮或卡片加 position: relative——结果弹窗直接飞到浏览器右上角，而不是按钮旁边。
更隐蔽的问题是：父元素虽没写 position，却用了 transform 或 filter。现代浏览器中，这类属性会隐式创建新的 containing block，导致 absolute 子元素意外参照它定位，而不是你预期的 relative 祖先。
- 检查 DOM 结构，确认
absolute元素的直系或上级父元素是否真有position: relative - 避免在同一个父元素上同时用
transform和期望它作为absolute锚点——二者冲突 - 用浏览器开发者工具的“Computed”面板看元素的
Containing Block是谁，比猜靠谱
z-index和层叠顺序必须靠relative父元素激活
z-index 只对 position 值不为 static 的元素生效。所以即使只是想控制子元素层级，也得让父元素先设 position: relative（哪怕不偏移）。
但要注意：z-index 在父子间不是“继承”，而是“分层”。两个同级的 relative 容器，各自内部的 absolute 子元素，层叠关系由父容器的 z-index 决定——子元素再高，也盖不过另一个父容器。
- 不要只给子元素设
z-index，父容器没定位，这个值直接被忽略 - 多个
relative父容器之间要比较z-index，才能确定谁在上谁在下 - IE6/7 有特殊规则，但现在基本可忽略，除非维护老系统
top 值——很多 bug 根子就在那行漏掉的 position: relative 上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
