脱离文档流后宽度收缩是正常行为，因绝对/固定定位元素默认采用shrink-to-fit机制，仅占内容所需最小宽度；解决方法包括显式设width:100%、left:0;right:0;或改用position:relative。
元素设置 position: absolute 或 position: fixed 后，会脱离标准文档流，导致其宽度不再自动适应父容器（比如不撑满父级块、文字换行异常、内联表现失常等），这不是“bug”，而是定位机制的自然结果。
为什么脱离文档流后宽度会变小？
默认情况下，脱离文档流的元素宽度表现为“收缩至内容宽度”（shrink-to-fit），即只占下文本、图片等子内容实际需要的最小水平空间，不再继承父元素的 width: 100% 或块级默认行为。例如：
- 一个
<div>文字内容</div>设了position: absolute，它不会铺满父容器，而只包住“文字内容”几个字的宽度； - 如果内部是空的或只有 inline 元素，宽度可能变成 0；
-
position: relative不脱离文档流，所以宽度不受影响——这是关键区别。
常用解决方法（按场景选）
根据你要实现的效果，选择对应策略：
-
想让它和父容器一样宽：显式设置
width: 100%，或用left: 0; right: 0;（更推荐后者，尤其配合top/bottom可同时控制高宽）； -
想自适应内容但不超父容器：用
max-width: 100%; width: fit-content;（注意兼容性，老版 Safari 需加-webkit-前缀）； -
要保持块级默认行为（如换行、居左对齐）：改用
position: relative+top/left微调，它不脱离流，宽度照常； -
父容器本身没设宽，子绝对定位又没设宽：先确保父容器有明确宽度（比如
width: 300px或max-width: 100%），否则100%无意义。
容易忽略的关键细节
定位元素的百分比宽高，是相对于最近的已定位祖先元素（即 position 为 relative/absolute/fixed/sticky 的父级），不是相对于 body 或 viewport。如果祖先都没定位，就相对初始包含块（通常是视口）。所以：
立即学习“前端免费学习笔记（深入）”；
- 若希望
width: 100%相对于某个特定父容器，请给该父容器加上position: relative（哪怕不需要偏移）； -
left: 0; right: 0;在没有width时，会强制元素拉伸填满可用水平空间，且自动处理 box-sizing； - 使用
transform: translateX()替代left微调位置，可避免因脱离流带来的布局“消失感”，同时保留原本的文档流宽度逻辑（需配合position: relative）。
一句话总结
绝对定位元素宽度收缩是正常行为，本质是脱离流后失去块级上下文；解决核心就是主动声明尺寸或换用不脱离流的定位方式，而不是等待它“自动适应”。
