绝对定位元素宽度自动计算为包含块宽减left减right；fixed元素以视口为包含块；relative/sticky不改变尺寸规则；box-sizing影响width所指范围。
在 CSS 定位中，元素的宽度计算并不总是等于 width 值本身，尤其当使用 position: absolute 或 position: fixed 时，浏览器会根据“包含块”和“偏移属性”自动参与尺寸推导。理解这套规则，能避免布局错位、意外撑满或收缩等问题。
绝对定位元素的宽度自动计算逻辑
当一个 position: absolute 元素同时设置了 left 和 right（且未设 width），浏览器会将其宽度设为“包含块宽度减去 left 和 right 的值”。即：
-
width = 包含块 width − left − right（前提是width: auto） - 若只设
left未设right和width，则宽度仍按常规流式行为（如内容撑开或继承父宽） - 若同时设了
width、left、right，则width优先，right可能被忽略或导致溢出（取决于box-sizing和是否触发 shrink-to-fit）
fixed 定位与视口的关系
position: fixed 元素的包含块是视口（viewport），因此其 left/right 计算基准是视口宽度。例如：
-
left: 20px; right: 30px; width: auto;→ 宽度 = 视口宽度 − 50px - 若同时写
width: 100px;，则right失效，元素从left: 20px开始占 100px，可能超出右侧边界
relative / sticky 定位不改变尺寸计算规则
position: relative 和 position: sticky 不改变元素的“正常文档流尺寸计算方式”。它们的宽度依然遵循：
立即学习“前端免费学习笔记（深入）”；
- 块级元素默认
width: auto→ 填满包含块（减去 padding/margin/border） - 行内元素由内容决定宽度，不受
left/right影响（因为top/left等仅造成位移，不参与盒模型计算） -
sticky在粘性生效前表现同relative，生效后表现类似fixed，但尺寸仍基于原始包含块
box-sizing 与 padding/border 对 width 的影响
无论定位方式如何，box-sizing 都决定 width 指代的范围：
-
box-sizing: content-box（默认）→width仅指内容区，总宽度 =width + padding + border -
box-sizing: border-box→width包含 content + padding + border，更利于定位时控整体尺寸 - 特别注意：绝对定位元素若设
left/right同时又设padding，实际可渲染区域会进一步压缩（因 padding 在 width 内部）
