aspect-ratio本身不负责定位，只推导尺寸；必须配合width/max-width等宽度基准和position:relative才能让绝对定位子元素有可靠参照，否则父容器塌陷导致定位失效。
aspect-ratio 本身不负责定位，它只推导尺寸；要配合 position 正常工作，必须先让容器“有尺寸可算”，否则 position: absolute 或 relative 子元素会因父容器塌陷而错位。
为什么 aspect-ratio + position 容易失效？
常见现象是：设置了 aspect-ratio: 16 / 9 和 position: relative，但内部 position: absolute 的子元素没按预期居中或贴边——根本原因是父容器宽度为 0 或高度未被触发计算。
- 父容器没设
width、max-width或弹性布局轨道约束 → 宽度不可测 →aspect-ratio不生效 → 高度为0→ 绝对定位子元素失去参照 - 父容器写了
height: 100%或height: auto→ 浏览器认为高度已确定 → 跳过aspect-ratio计算 - 父容器是
display: inline-block且无显式宽高 → 行内上下文下宽度默认收缩 →aspect-ratio无基准可依
aspect-ratio 在 position: relative 容器里怎么写才稳？
关键不是“加了 position 就能用”，而是确保父容器先获得可测量的宽度，并放行高度推导。
- 必须声明
width或max-width（如width: 100%、max-width: 480px），不能全靠flex或grid自动撑开却不设轨道尺寸 - 禁止写
height相关声明（包括height: auto、height: 100%、min-height与max-height冲突值） - 推荐组合：
position: relative; width: 100%; aspect-ratio: 16 / 9;—— 这样子元素position: absolute才有可靠边界 - 若父容器在
flex里，需确认其flex-basis或所在轨道有明确宽度（如grid-template-columns: 1fr 200px中的200px列）
绝对定位子元素如何贴合 aspect-ratio 容器边界？
aspect-ratio 算出的是容器最终尺寸，子元素定位基于这个结果，但要注意内容溢出和裁剪行为。
- 子元素设
top: 0; left: 0; width: 100%; height: 100%时，它会填满整个比例框，但若内容本身有固有尺寸（如图片），仍需配object-fit控制铺法 - 用
inset: 0替代四边top/left/bottom/right更简洁，语义等价 - 居中常用：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)—— 这依赖父容器已有真实宽高，aspect-ratio必须已生效 - 如果子元素是
img，别漏掉width: 100%; height: 100%，否则object-fit不触发
兼容旧浏览器时，position + 占位方案怎么降级？
当 @supports not (aspect-ratio: 16 / 9) 生效时，传统 padding-top hack 仍要适配定位逻辑。
- 外层容器设
position: relative; width: 100%; padding-top: 56.25%（对应 16:9），height: 0 - 子内容用
position: absolute; inset: 0填满，和aspect-ratio场景一致 - 注意：此方案下
padding-top基于父宽计算，所以父容器必须有可测宽度（同aspect-ratio要求） - Safari 15.3 及更早会静默忽略
aspect-ratio，DevTools 中该声明被划掉即代表不支持，此时降级必须启用
aspect-ratio 单独一行，而是它和 width、position、display 的协同约束——任何一环松动，定位就失去锚点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
