Flex容器需同时设position: relative和可计算高度，否则绝对定位元素会相对body定位且top/left失效；top:50%等依赖父高，高度为0时结果为0；居中需配合transform:translate(-50%,-50%)。
Flex容器没设 position: relative，定位基准直接跳到 body
绝对定位元素的 top、left 是相对于「最近的已定位祖先」计算的，而 position: static（Flex 容器默认值）不算「已定位」。一旦父容器没显式写 position: relative，浏览器就会继续向上查找，大概率落到 body 上——你写的 top: 20px 就变成距视口顶部 20px，而不是距 Flex 容器顶部。
用 DevTools 选中该元素 → Elements 面板 → 查看 offsetParent 是谁，如果显示为 body 或 html，就证实了这点。
- 别只给外层 wrapper 加
position: relative，得加在**直接包裹该绝对定位元素的 Flex 容器上** - 中间某级意外写了
position: relative或transform（如transform: translateZ(0)），会“截胡”成为offsetParent，导致定位错乱 -
position: absolute元素本身不参与 Flex 布局，所以它不会影响其他子项的justify-content或align-items行为
top: 50% 计算结果是 0，因为父容器高度为 0px
Flex 容器若没设 height 或 min-height，且内部所有子项都是 position: absolute（不参与布局），它的计算高度就是 0px。top: 50% 的 50% 就是 0，等价于 top: 0，看起来像“居中失效”，其实是基准塌了。
- 检查 DevTools 中父容器的 computed
height，如果是0px或auto且实际渲染为 0，就是这个原因 - 解决方式：加
min-height: 400px、height: 100dvh（比100vh更稳，适配 iOS 地址栏变化），或留一个流内子项/伪元素撑高（如::after { content: ""; display: block; height: 1px; }） -
inset: 0同样依赖父容器有可计算高度，高度为 0 时也无效
top: 50%; left: 50% 不等于视觉居中
这两个声明只是把元素的左上角挪到父容器内容区中心点，不是让整个元素视觉居中。常见表现是元素右下角伸出容器、明显偏右偏下。
- 必须补上
transform: translate(-50%, -50%)，这个百分比是相对于元素自身宽高，动态内容下依然可靠 - 别写成
transform: translate(-50px, -50px)——固定像素无法适配尺寸变化 -
justify-content: center和align-items: center对position: absolute子项完全无效，不要指望它们起作用
Flex 容器的 padding 和 align-items 会干扰定位感知
top: 0 是相对于父容器的 padding box 上边缘，不是 border box。如果父容器有 padding-top: 20px，那 top: 0 的元素离可视顶部就有 20px 距离。更隐蔽的是：align-items: stretch（默认）会让非绝对定位子项拉伸占满高度，但绝对定位元素不受影响——你看到的“顶部”是其他子项撑出来的视觉顶部，不是定位参考的顶部。
- 临时加
outline: 1px solid red到父容器，看清 content box 边界 - 若需贴父容器内容区顶部，确认
padding-top为 0；若需贴视觉顶部，得手动减去其他子项带来的偏移 - 移动端 viewport 高度不稳定时，
height: 100vh在 iOS Safari 中可能不更新，优先用min-height: 100dvh
真正容易被忽略的，是定位生效的前提从来不是“代码写对了”，而是那个直接父容器**同时满足两个条件**：有 position: relative（建立定位上下文），且有可计算的高度（哪怕只是 min-height: 1px）。漏掉任意一个，top/left 的数值就失去了意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
