伪元素的绝对定位参照其宿主元素是否创建包含块：宿主需为 relative/absolute/fixed/sticky 才能成为参照，其中 relative 最安全；若宿主为 static，则向上查找已定位祖先。
伪元素本身不能成为定位上下文，所以它的绝对定位参照物，永远取决于其宿主元素（即写 ::before 或 ::after 的那个真实元素）是否创建了包含块。 换句话说：不是“伪元素需要父级 relative”，而是“伪元素的宿主元素必须是非 static 定位，才能让伪元素的 position: absolute 有预期参照”。
伪元素的 position: absolute 参照谁？
伪元素（::before、::after）没有自己的 DOM 节点，它依附于宿主元素。当给伪元素设 position: absolute 时，它的包含块由宿主元素的定位状态决定：
- 如果宿主元素是
position: static（默认），伪元素会向上查找最近的已定位祖先 —— 很可能落到body上，导致“飘走” - 如果宿主元素是
position: relative/absolute/fixed/sticky，伪元素就以它为包含块，top/left等值才真正相对于宿主盒模型起算 - 宿主元素不需要任何偏移（
top、left等），只要position值不是static就够了
position: relative 是最安全的宿主定位方式
虽然 absolute、fixed、sticky 也能创建包含块，但它们会改变宿主元素自身在文档流中的行为：
-
position: absolute的宿主会脱离文档流 → 父容器可能塌陷，影响布局稳定性 -
position: fixed的宿主脱离视口滚动 → 伪元素也跟着“钉死”，通常不是你想要的 -
position: sticky行为依赖滚动位置，边界条件复杂，易出意料 -
position: relative不改变文档流位置，只创建定位上下文 —— 零副作用，最可控
常见失效场景和检查点
即使写了 position: relative，伪元素仍跑偏，大概率是以下情况之一：
立即学习“前端免费学习笔记（深入）”；
- 宿主元素被其他 CSS 覆盖了
position值，比如某个!important规则或框架重置样式把它又打回static - 宿主元素设置了
transform、filter或will-change→ 这些属性会创建新的包含块，导致伪元素实际参照的是 transform 后的“新盒子”，而非原始 padding box - 宿主元素高度为 0（例如内部只有
absolute子元素且未撑开）→ 伪元素坐标系还在，但视觉上找不到锚点；可用min-height: 1px或padding快速验证 - 伪元素用了
top: 0; left: 0;，但宿主有padding→ 绝对定位默认从 padding box 起算，不是 content box；必要时加box-sizing: border-box统一理解
不加 position: relative 的替代方案极少实用
理论上你可以把伪元素宿主换成 position: fixed 来强制相对视口，或者用 JS 动态计算 offset 并 inline top/left，但这些都绕开了 CSS 定位机制的本质。真实项目中，99% 的需求只需一行：
/* 宿主元素 */
.element {
position: relative;
}
<p>.element::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
}真正容易被忽略的，是开发者工具里看到的 “offsetParent” 不是你写的父选择器，而是某个中间层带 position 的祖先 —— 所以调试时务必右键检查 computed style 中的 position 和 offsetParent，而不是只看源码写了啥。
