absolute 元素的 top: 10% 相对于其最近的非 static 定位祖先（position 为 relative/absolute/fixed）的 content box + padding 高度（clientHeight），若无此类祖先则相对于初始包含块（如 body 或视口）；该参照物必须有可计算高度，否则百分比归零。
怎么确认 absolute 元素的 top: 10% 是相对于谁的高度？
绝对定位元素的 top 百分比值，永远参照其「包含块（containing block）」的 height —— 而这个包含块，就是离它最近的、position 值为 relative、absolute 或 fixed 的祖先元素（不包括 static）。如果没有这样的祖先，则回退到初始包含块（通常是 body 或视口）。
但注意：不是“祖先元素的 border box 高度”，而是它的 content box + padding 区域的可用高度（即 clientHeight），且该祖先必须有明确可计算的高度（不能是 height: auto 且内部无撑开内容）。
- 用浏览器开发者工具选中该
absolute元素 → 看右侧面板「Computed」→ 展开top→ 点击数值旁的箭头图标，会高亮显示其包含块 - 手动检查 DOM 树中向上第一个非
static祖先：依次查看position值，跳过static（哪怕写了position: static也等同于没写） - 若所有祖先都是
static，那top: 10%就是相对于body的 height；此时务必确认html和body是否设了height: 100%，否则body高度为auto，百分比会计算为0
为什么 top: 10% 没生效，或者偏移量怪怪的？
常见失效原因不是语法错，而是参照物高度不可计算。CSS 规范明确要求：当包含块的高度为 auto 且未被内容撑开时，top 的百分比值将解析为 0（不是报错，是静默归零）。
- 父容器是
position: relative，但没设height，内部又没子元素撑高 → 它的 clientHeight = 0 →top: 10%= 0px - 父容器用了
display: flex或grid，但未设置align-items/justify-content，导致子元素无法触发高度继承 - 父容器设置了
overflow: hidden且高度塌陷，表面看有高，实际 computed height 仍是 auto - 在 iframe 或 Shadow DOM 内部，包含块边界可能意外切换，需单独检查其宿主容器的定位状态
如何强制让 top 百分比有可靠参照？
别依赖“它应该有个父级 relative”，主动控制参照物的高度和定位状态才是稳妥做法。
立即学习“前端免费学习笔记（深入）”；
- 给最近的非
static祖先显式设置height（如height: 400px）或确保它能被内容自然撑开 - 若需响应式，用
min-height替代height，并配合box-sizing: border-box避免 padding 干扰 - 不想改父容器？可换思路：用
transform: translateY(10%)—— 它的百分比始终相对于元素自身 height，不受祖先影响 - 极端情况（如全屏弹窗），直接加
position: fixed，此时top: 10%明确参照视口高度，完全绕过祖先链
margin-top 百分比也在“偷偷”参照父容器宽度？
是的，而且这点极容易混淆：哪怕你给一个 absolute 元素写 margin-top: 10%，它依然不看任何祖先的高度，只看其包含块的 width —— 这是 CSS 盒模型的硬性规定，和定位方式无关。
-
margin-top: 10%和top: 10%的参照对象完全不同：前者永远是父容器 width，后者才是祖先定位元素 height - 如果误以为两者行为一致，就会发现“明明父容器很高，margin 却小得离谱”——大概率是因为父容器很窄
- 调试时可在父容器上临时加
outline: 1px solid red，对比其 width 和你预期的 margin 大小是否匹配
top 百分比异常，第一反应不该是调数值，而是打开 Elements 面板，一级一级往上点开 computed position 和 height，亲眼确认那个“最近非 static 祖先”到底有没有 height。 
