为何将容器设置为absolute定位会导致其背景范围收缩？

核心逻辑：两种定位的宽度计算规则完全不同 #

• position: relative：相对定位的元素没脱离正常文档流，和普通块级元素的表现一致——宽度默认是auto，会自动填充满父容器的可用宽度（这里父容器是body，所以直接撑满浏览器宽度）。内部的<p>本身就是块级元素，自然跟着占满整个宽度，所以背景色会覆盖整个浏览器宽度的区域。
• position: absolute：绝对定位的元素直接脱离了正常文档流，此时它的宽度规则彻底改变：不再填充父容器，而是变成“收缩包裹”内部内容的模式。也就是说，容器只会缩到刚好能包住里面的<p>段落，背景色自然也就只覆盖段落所在的范围，不会撑满浏览器宽度。

额外补充 #

如果给绝对定位的容器加上width: 100%，它就会重新撑满最近的定位父元素的宽度，背景色也会跟着覆盖整个区域——这也侧面印证了绝对定位本身不继承父容器宽度的特性。

内容的提问来源于stack exchange，提问作者M Uzair