绝对定位元素填满包含块必须先锚定包含块：父元素需设position: relative等非static值，否则width/height百分比将回退至视口；四边定位（top/right/bottom/left）比百分比更可靠，且不受父高度是否明确影响。
绝对定位元素填满包含块必须先锚定包含块
绝对定位元素的 width: 100% 或 height: 100% 不是相对于视觉父容器，而是相对于「包含块」。如果父元素没设 position: relative（或 absolute/fixed/sticky），浏览器会一路向上查找，找不到就回退到视口——这时填满的就是整个屏幕，不是你看到的父盒子。
常见错误现象：width: 100% 的子元素撑满全屏；开发者工具里 computed width 显示为 100vw 而非预期像素值。
- 给直接父元素加
position: relative（最安全，不改变布局流） - 避免中间某层漏掉
position：嵌套深时用开发者工具的「Computed」面板看containing block是谁 -
overflow: hidden不产生新包含块，不能替代position
四边定位比 width/height 百分比更可靠
当父容器高度是 auto（比如由文字撑开），height: 100% 会算成 0px —— 这是 CSS 规范行为，不是 bug。而 top: 0; bottom: 0; 不依赖父容器显式高度，只依赖其已建立的包含块。
实际效果差异：
立即学习“前端免费学习笔记（深入）”；
-
left: 0; right: 0;→ 宽度 = 包含块 content width（不含 padding/border） -
top: 0; bottom: 0;→ 高度同理，且不受父 height 是否明确影响 -
inset: 0是语法糖，等价于四值写法，但 Safari 15.4 以下、IE 完全不支持
padding 和 border 会让“填满”视觉错位
绝对定位元素的 top/left 参照点是包含块的 **content box 边缘**，不是可视区域左上角。如果父容器有 padding: 20px，子元素设 top: 0; left: 0;，它实际距父可视边缘就是 20px。
想让子元素真正贴住父容器内边（即 padding 内侧），有三种做法：
- 父元素设
padding: 0，把内边距交给子元素自己控制 - 子元素用负偏移补偿：
top: -20px; left: -20px;（需同步维护） - 更推荐：用
box-sizing: border-box+left: 0; right: 0; padding: 12px;，此时内容区宽度自动收缩，不会溢出
width: auto 在 left/right 同时存在时的行为容易误判
很多人写 left: 20px; right: 20px; 以为就能“两边留白、中间自适应”，结果发现盒子缩成一条线或撑满视口。这是因为 width: auto 在同时声明 left 和 right 时，会按「left 到 right 的剩余空间」计算宽度——但前提是包含块宽度明确。
关键细节：
- 若包含块宽度不确定（如未设
width的 flex 容器子项），width: auto可能算出0px -
left、right和width三者共存时，width优先级最高，left/right只管位置，不管宽 - 要包裹内容，别依赖
left/right，改用width: fit-content（Safari 需-webkit-fit-content）
padding 和 border 对定位原点的隐性影响——它不报错，但会让 top: 0 始终差那么几像素。 
