因为伪元素父元素未设position: relative，导致absolute定位向上回溯至<html>；必须给宿主元素显式加position: relative以创建定位上下文，这是“子绝父相”的核心解法。
为什么 ::before 或 ::after 会跑到页面左上角？
因为伪元素默认不激活定位上下文，position: absolute 会一路向上找「最近的已定位祖先」；如果父元素是 position: static（默认值），最终就相对于 <html> 定位，看起来就像“飞出去”了。
必须给宿主元素（即伪元素的父级）显式设置 position: relative —— 即使不写 top/left，它也立刻成为定位参考框。这是最稳妥、最常用的做法，业内叫「子绝父相」。
- 别用
position: absolute做父级：会导致父级脱离文档流，高度塌陷，后续内容上移 - 别漏写
content：没有content: ""，::before/::after根本不会渲染 - 伪元素默认
display: inline：想设宽高或定位，得加display: block或inline-block
::after 怎么精准贴住父元素四边？
当父元素设了 position: relative，伪元素用 position: absolute 后，top: 0; left: 0; right: 0; bottom: 0; 就能撑满父元素内部区域——但注意：这个“内部”是从父元素的 padding box 左上角 开始算的，不是 border 或 content 边界。
常见写法：
立即学习“前端免费学习笔记（深入）”；
button {
position: relative;
padding: 12px 24px;
}
button::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.1);
border-radius: 6px;
}- 若父元素有
padding: 10px，top: 0实际离 border 还有 10px；想贴 border，得用top: -10px（不推荐，耦合强） - 撑满时慎用
width: 100%; height: 100%：它只按内容区计算，不如top/left/right/bottom可靠 - 圆角覆盖：用
border-radius要和父元素一致，否则视觉断裂
响应式下 top/left 像素值容易错位怎么办？
硬写 top: 10px 在不同屏幕尺寸下极易偏移，尤其当父元素尺寸用百分比或 rem 时。更健壮的方式是结合 transform 或 calc()。
- 右上角图标：用
top: 8px; right: 8px;比top: 8px; left: calc(100% - 32px);更简洁且兼容好 - 居中覆盖层：优先用
top: 50%; left: 50%; transform: translate(-50%, -50%)，避免依赖父元素具体尺寸 - 动画场景：修改
transform比改top/left性能更好，能触发 GPU 加速
z-index 失效、伪元素被盖住是怎么回事？
z-index 只在同一个「层叠上下文」里生效。如果父元素没设 z-index（哪怕设了 position: relative），它的子伪元素就算设了 z-index: 999，也压不住兄弟元素的父容器。
- 解决方法：给宿主元素加一个最小层级，比如
z-index: 0，就能让它和兄弟元素形成可比的层叠环境 - 滚动容器影响：父元素若设了
overflow: hidden或scroll，可能裁剪掉溢出的伪元素，即使它 z-index 很高 - 伪元素无法继承父级
z-index：必须单独设，且值要足够大才能突破父容器的层叠层级
真正难调的不是定位本身，而是层叠上下文嵌套和父级是否塌陷——这两个点一错，整个伪元素就“看不见”或“位置飘忽”。
