绝对定位元素用%宽高时，父容器必须有明确高度；其包含块是最近非static祖先，若父级仅relative未设height，则50%计算为0；推荐用vh/vmax、flex包裹或inset替代。
绝对定位元素用 % 宽度时，父容器必须有明确高度
很多人给 position: absolute 元素设 width: 50%，结果在某些设备上宽度“消失”或异常——根本原因是百分比宽高依赖于包含块（containing block）的尺寸。对绝对定位元素来说，包含块是**最近的、非 static 定位的祖先元素**，且该祖先必须有明确的 height（不能是 auto 或未设置）。
常见踩坑点：
- 父级仅设
position: relative但没设height或min-height，导致子元素height: 50%计算为0 - 用
vh/vmax替代百分比更可靠，比如width: 80vw不依赖父高 - 若必须用百分比，建议在父容器加
min-height: 100vh或根据内容撑开（如用display: flex; flex-direction: column）
用 flex 包裹绝对定位元素来解决定位基准漂移
当页面结构复杂、多层嵌套时，绝对定位元素的“参考系”容易因父级 transform、perspective 或 will-change 被意外创建新的包含块，导致位置偏移。此时不直接改定位逻辑，而是用 flex 容器“收编”绝对定位子元素：
- 给父容器设
display: flex和position: relative，它仍可作为包含块 - 子元素保持
position: absolute，但通过top/right等微调，而非依赖 flex 自动布局 - 关键好处：flex 容器自身具备良好的响应式伸缩性，能自然适配不同屏幕，避免因浮动或 inline-block 导致的基准错乱
- 注意不要对绝对定位子元素再设
align-self或margin: auto，这些在绝对定位下无效
响应式断点中慎用 left/right 配合 %
写 @media 时，常有人这样写：
@media (max-width: 768px) {<br> .box { left: 10%; right: 10%; }<br>}
这看似让元素左右留白 10%，但实际效果取决于元素是否设了 width。若没设，left 和 right 同时生效会强制宽度为 auto，而 auto 宽度在绝对定位下由内容决定，极易在小屏溢出。
更稳的做法：
- 显式控制
width+ 单侧偏移，例如width: 80%; left: 10% - 用
inset（现代浏览器支持）替代四值：inset: 10% auto auto 10% - 小屏优先场景下，干脆改用
transform: translateX(-50%)配合left: 50%居中，兼容性好且不受父宽波动影响
移动端 Safari 中 position: absolute 与 input 聚焦冲突
iOS Safari 在软键盘弹出时会重置 viewport 缩放、滚动位置，导致绝对定位元素“跳动”或脱离预期位置，尤其当它盖在 <input> 上方时。
这不是 CSS 本身问题，但响应式适配绕不开：
- 避免对输入框上方的绝对定位提示层使用
bottom: 0或top: 100%这类强依赖视口的定位 - 改用 JS 监听
focus/blur，动态计算input的getBoundingClientRect()，再设置top值 - 或者放弃绝对定位，用
position: fixed+calc(100vh - Xpx)锚定在视口底部（需配合viewport-fit=covermeta） - 测试时务必真机验证，模拟器无法复现软键盘真实行为
立即学习“前端免费学习笔记（深入）”；
绝对定位的响应式适配，本质不是“怎么写 CSS”，而是“清楚每一处像素由谁决定”。父容器的包含块边界、视口变化时机、输入法交互干扰——这些都比 width: 80% 更关键。
