绝对定位元素设 width: 100% 未撑满父容器，因其宽度参考最近已定位祖先（非 static 的父级），若无则参考视口；需父级设 position: relative 等才能使 100% 相对父容器计算。
绝对定位元素设 width: 100% 为什么没撑满父容器？
因为 position: absolute 元素脱离文档流后，width: 100% 不是相对于父容器（parent），而是相对于**最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的祖先）**。如果找不到这样的祖先，就回退到初始包含块（通常是视口）。
常见错误现象：div 父级没加 position: relative，子元素设 width: 100% 却撑满整个屏幕宽度。
- 确保父容器设置了
position: relative（或其它非static值） - 检查祖先链中是否有更近的已定位元素“劫持”了参考系
- 用浏览器开发者工具的“Computed”面板看
width的实际计算值和 reference box 是谁
width: auto 在绝对定位下到底怎么算？
width: auto 对绝对定位元素来说，行为和普通流内元素完全不同：它**默认收缩内容（shrink-to-fit）**，即只占内容所需最小宽度，不会自动拉伸填满可用空间。
使用场景：做下拉菜单、提示气泡、弹出层等需要“刚好包住文字”的组件时，auto 很自然；但想让它响应式铺满父容器宽度时，就不能依赖 auto。
立即学习“前端免费学习笔记（深入）”；
- 若同时设了
left和right（比如left: 0; right: 0;），width: auto会强制拉伸以满足这两个偏移约束 —— 这是关键技巧 - 若只设
left未设right，又没给width，那宽度就是内容宽度，和min-content类似 - 注意：IE8 及更早版本不支持
left + right触发自动拉伸，需降级处理
想让绝对定位元素宽度跟随父容器，推荐三种可靠写法
别只盯着 width 属性，要结合偏移控制。以下写法在现代浏览器中稳定生效：
-
方案一（最常用）： 父容器加
position: relative，子元素写left: 0; right: 0; width: auto; -
方案二（显式声明）： 同样要求父容器已定位，子元素写
left: 0; width: 100%;（此时100%才真正指向父容器） -
方案三（Flex 辅助）： 父容器用
display: flex，子元素设position: absolute并配合inset: 0（CSS Logical Properties，需考虑兼容性）
性能提示：频繁修改 left/right 比改 width 更易触发 layout，但对现代浏览器影响微乎其微；真正要注意的是避免在动画中同时改多个偏移+width，容易引发重排。
容易被忽略的边界情况：padding、border 和 box-sizing
即使 left: 0; right: 0; 正确设置了，如果父容器有 padding，子元素还是会顶到父容器 content box 边缘，而不是 padding 内边缘 —— 它默认不感知父容器的 padding。
解决办法取决于需求：
- 想贴父容器内边距边缘？给子元素加
margin: 0 -父容器padding值（不推荐，耦合强） - 更合理的是：把
padding挪到子元素上，或用inset配合calc()（如inset: 0 0 0 1rem） - 务必确认
box-sizing: border-box已全局设置，否则border会让left + right拉伸后溢出
真实项目里，inset 和 left/right/top/bottom 的组合逻辑比表面看起来更微妙，尤其混用 transform 或 zoom 时，建议始终用 DevTools 实时验证渲染结果。
