一、普通块元素默认行为

普通块元素（position: static）：

• 默认宽度 width: auto → 自动撑满父容器的 可用宽度

• 受文档流影响，父容器决定布局

示例：

<div style="width: 300px; background: lightblue;">
  <div style="background: red;">我是块元素</div>
</div>

红色 div 自动宽度 = 300px

二、 绝对定位块元素的行为

当块元素 position: absolute 时：

• 它 脱离文档流

• 宽度计算规则变了：

  • 如果没有指定 width，默认宽度只包裹内容（类似 shrink-to-fit）

  • 除非你指定 left 和 right，此时宽度会自动撑满两侧间距

示例：

<div style="position: relative; width: 300px; height: 200px; background: lightblue;">
  <div style="position: absolute; top: 20px; background: red;">
    我是绝对定位
  </div>
</div>

红色 div 宽度只包裹内容，不会自动撑满 300px

如果加上 left:0; right:0;：

<div style="position: absolute; top:20px; left:0; right:0; background:red;"></div>

红色 div 宽度 = 父容器宽度 300px

三、 为什么绝对定位会这样？

CSS 规范中提到：

绝对定位元素宽度的默认值依赖于它的 包含块（父元素），计算规则是 shrink-to-fit，即尽量包裹内容，而不是像普通块元素那样自动撑满

总结原因：

绝对定位脱离文档流 → 不再“占据父容器宽度”

块级元素默认撑满宽度是针对静态定位（文档流）而言

绝对定位需要你指定 width 或 left/right 来控制宽度

四、 总结表