绝对定位元素的宽高计算依赖盒模型
当设置 position: absolute 后，元素脱离文档流，但它的尺寸依然遵循标准盒模型：即 width/height 控制内容区，padding、border、margin 仍按规则叠加。很多人误以为“绝对定位就不用管盒模型了”，结果出现实际占位比预期大一圈。
-
box-sizing: border-box是强烈推荐的——它让width包含padding和border，避免手动减去边框导致尺寸错乱 - 若用
top/right/bottom/left四值同时定位，width和height会变成“拉伸模式”，此时盒模型行为更敏感：比如padding会撑开内部空间，但不会影响四边偏移量 - 注意
margin在绝对定位下**不触发外边距合并**，但依然会影响元素自身位置（例如left: 20px; margin-left: 10px实际左偏移是 30px）
用 inset 替代 top/right/bottom/left 更安全
inset 是 CSS Logical Properties 中的新属性，语法如 inset: 10px 20px 30px 40px，等价于 top: 10px; right: 20px; bottom: 30px; left: 40px。它和盒模型配合更直观：
- 当配合
width: fit-content或max-width使用时，inset定义的是“可用空间边界”，盒模型尺寸在该范围内自然收敛 - 响应式场景下，
inset-inline-start等逻辑属性能自动适配 RTL/LTR，而传统方向属性容易在切换文字方向时失效 - 旧版浏览器不支持
inset（Chrome 110+ / Firefox 119+），需要降级回top/right/bottom/left并加前缀或条件判断
父容器 position: relative 不只是“为了绝对定位”
给父容器设 position: relative 表面是为了让子元素 absolute 相对于它定位，但更关键的是它定义了盒模型的“参考上下文”：
- 父容器若有
padding，子元素top: 0; left: 0会紧贴其内容区左上角，而不是内边距边缘——这点常被忽略，导致视觉错位 - 若父容器设置了
transform（哪怕只是translateZ(0)），也会创建新的定位上下文，且此时子元素的absolute计算会受其transform-origin和缩放影响，盒模型尺寸可能被非线性拉伸 - 父容器若用
display: grid或flex，子元素absolute后不再参与布局，但它的inset值仍以父容器的内容框为基准，不是网格/弹性区域
避免 margin 在绝对定位中“消失”的错觉
绝对定位元素的 margin 不会和其他元素合并，但它可能“看起来没生效”——常见于以下情况：
立即学习“前端免费学习笔记（深入）”；
- 父容器未设
position，子元素absolute后相对于初始包含块（通常是 viewport）定位，此时margin是相对于 viewport 的，容易误判为无效 - 同时设置了
inset和margin，比如inset: 10px; margin: 5px，最终效果是内容区离四边各 15px，但开发者常以为margin被忽略了 - 使用
width: 100%+padding+border时，若没设box-sizing: border-box，margin会进一步超出父容器，造成横向滚动或裁剪
真正难处理的，是嵌套多层绝对定位 + 动态内容 + 弹性盒模型的组合场景。这时候盒模型的每一像素都得手动对齐，inset 和 box-sizing 不是可选项，是必选项。
