绝对定位元素的 width: auto 不再依据文档流等式计算，而是由包含块宽度、left 和 right 共同推导；height: auto 默认为 0；尺寸基准取决于最近非 static 祖先（包含块），而非父元素；box-sizing 影响宽高实际占用尺寸。
绝对定位元素的 width: auto 不再解文档流等式
普通流中 width: auto 是靠解这个等式算出来的：margin-left + border-left + padding-left + width + padding-right + border-right + margin-right === 父元素 content width。一旦加了 position: absolute，这个等式就失效了——浏览器改用包含块宽度、left 和 right 三者共同推导实际宽。
常见错误现象包括：
- 没设
left和right时，width: auto收缩到内容最小宽（比如单行文字只占几像素） - 只设
left: 20px和width: 300px，right自动为auto，盒子右边缘不贴父容器边界 - 同时设
left、right和width，属于“过度约束”，浏览器会忽略width，按left和right推出实际宽
height: auto 在绝对定位下默认为 0
普通流中 height: auto 是由子内容撑开；绝对定位下它默认高度就是 0，除非满足以下任一条件：
- 显式写了
height（如height: 100px） - 同时设了
top和bottom，且包含块有明确高度 - 内部有不可折叠的内容（比如带
min-height的子元素），但这种行为不稳定，不能依赖
如果你看到一个空的 div 加了 position: absolute 后 offsetHeight 是 0，不是渲染 bug，是规范行为。
包含块决定一切，不是父元素
top/left 偏移和 width/height 计算都依赖“包含块”，而它不等于父元素：
- 包含块是最近的
position值为relative、absolute、fixed或sticky的祖先；找不到就 fallback 到初始包含块（通常是视口） - 父容器没设
position: relative？那你的left: 0很可能对齐到整个页面左边缘，而不是你预期的容器内边 - 祖先用了
transform（哪怕只是transform: translateZ(0)）？它也会成为包含块，导致尺寸基准突变 - 包含块本身有
padding或border？left/top是从它的 content box 起算，不是 border box
box-sizing 对绝对定位的影响容易被忽略
box-sizing 决定的是元素自身盒模型的尺寸解析方式，和定位无关，但和你写的 width/height 是否“如你所见”强相关：
- 默认
box-sizing: content-box：写width: 200px; padding: 10px; border: 2px solid→ 实际占用宽度 = 224px - 设
box-sizing: border-box：同样写法，实际宽高就是 200px，内边距和边框往里挤 - 你按设计稿写了
width: 300px，但发现它撑出了父容器，大概率是忘了设box-sizing: border-box - 多个绝对定位按钮并排时，若一个用了
border-box、另一个没用，它们的实际占位会不一致，对齐错乱
真正容易被忽略的点是：你改了一个 left 值，却没确认「谁是包含块」——position: absolute 的一切尺寸都锚定在最近的非-static 祖先上。这个祖先一旦错位，所有宽高逻辑都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
