为什么设置position:absolute的块级元素无法占满可用宽度？

块级元素默认占满父级可用宽度的规则，仅适用于常规文档流中的元素（即position为static/relative、无浮动属性的元素），绝对定位元素的宽度计算逻辑和常规流元素完全不同。

根据CSS规范，非替换类型的绝对定位元素，在未显式设置width属性，且没有同时定义left和right定位属性的情况下，宽度会自动收缩到刚好容纳内部内容的尺寸，不会自动拉伸填满父级包含块。

你提供的代码里的section元素刚好命中了这个规则：你仅给它设置了position: absolute、top: 10px、left: 500px，既没有定义宽度，也没有设置right属性，因此宽度由内部的标题、段落内容决定，不会占满全宽。

• 若需要让它从left:500px的位置开始占满后续所有可用宽度，只需补充right: 0即可，浏览器会自动计算宽度为「包含块总宽度 - left值 - right值」
• 若需要让它占满整个包含块的宽度，补充left: 0; right: 0即可，不需要额外设置width: 100%
• 当你把position切换为static时，元素回到常规文档流，自然触发常规块级元素的宽度规则，自动占满父级可用宽度，符合你的预期。

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