relative定位中top/bottom用%“不动”或“偏得离谱”，是因为其百分比参照父元素内容区高度计算，而父容器未设height/min-height时高度为0，导致10%等于0px；left/right的%参照父宽正常，但top/bottom需父高可计算，且父不能依赖子内容撑开；真正响应resize需满足：父有可计算高度（如height: 100vh）、不靠子内容撑高、避免flex/grid未撑开父容器；更稳方案是用transform: translateY(10%)（相对自身高）、calc()混合单位或flex/grid布局；验证方法：查Computed中top值是否为0px、加outline看父实际尺寸、换vh测试是否生效。
relative定位用%值为什么常常“不动”或“偏得离谱”
因为top/right/bottom/left在position: relative下，其百分比是相对于**包含块的高度/宽度**计算的，但这个包含块默认是父元素的内容区（content box），而多数父容器没设高度，导致top: 10%实际算出来是0px——不是你写错了，是参照物塌了。
- 父容器没显式设
height或min-height时，top: 20%很可能等于0px -
left/right的百分比参照父宽没问题，但top/bottom必须确保父高可计算 - 如果父是
display: flex或grid且子项没撑开它，同样会失效
让relative的%位移真正响应resize的三个前提
光写top: 15%不够，得把参照系“立住”。核心就三点：
- 父容器必须有**可计算的高度来源**：比如
height: 100vh、min-height: 500px，或父本身被flex/grid撑开 - 避免父容器高度依赖子内容（即别让父“包裹”子），否则resize时父高不变，%位移也不变
- 如果用
vh/vw单位替代%，要意识到它参照的是视口，不是父容器——这是两种不同响应逻辑
示例：
.parent { height: 100vh; }<br>.child { position: relative; top: 10%; }这时top: 10%才稳定等于10vh，随窗口缩放实时变化。
比relative + %更可控的响应式位移方案
真要靠百分比动态挪动，relative太依赖父容器状态。更稳的做法是换参照系：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateY(10%)：这里的%始终相对于**元素自身的高度**，不看父容器，resize时自然响应 - 用
calc()混合单位：top: calc(5vh + 2%)，但注意浏览器兼容性（IE不支持嵌套calc） - 对齐需求强的场景，直接上
flex或grid布局，位移交给justify-content/align-self，语义更清，resize天然友好
检查relative百分比是否生效的快速方法
别猜，直接看计算值：
- 在浏览器开发者工具里选中元素，看
Computed面板里的top值——如果显示0px但你写了10%，就是父高不可计算 - 临时给父加
outline: 1px solid red，确认它是否真的占了预期高度 - 把
top: 10%改成top: 10vh，如果动了，说明问题出在父容器高度机制，不是CSS写法本身
百分比位移看着简单，但它的“相对”二字，背后全是参照物的博弈。没立住父容器高度，%就只是个幻觉。
