父容器未设 position: relative 时，绝对定位子元素会向上寻找最近已定位祖先，导致 top/bottom 拉满整个视口而非父容器；必须显式设置父容器 position: relative 建立定位上下文。
父容器没设 position: relative，撑不满是常态
绝对定位元素的 top、bottom、left、right 不会自动参考“视觉上的父盒子”，而是找最近的已定位祖先（position 为 relative、absolute、fixed 或 sticky）。如果父容器没设 position: relative，浏览器就一路往上找，大概率落到 body 或视口上——这时 top: 0; bottom: 0 拉的其实是整个页面高度，不是你想要的父容器。
检查方法：打开 DevTools → 选中父容器 → 看 Computed 面板里的 position 值是不是 static（默认值）；如果是，立刻补上 position: relative。
- 别只给子元素加定位属性，父容器必须显式建立定位上下文
-
position: absolute的子元素对父容器高度无贡献，即使撑满了，父容器仍可能塌缩成 0 —— 这时要单独解决父容器高度问题 - 若父容器本身靠内容撑高，又用了
bottom: 0，某些 flex 布局下会触发意外收缩，需验证 computed height 是否符合预期
用 top/right/bottom/left 四值比 width/height 百分比更可靠
width: 100% 和 height: 100% 要求父容器有「已知高度」，而很多父容器高度是 auto（比如仅靠文字撑开），此时 height: 100% 计算结果就是 0。但 top: 0; bottom: 0 不依赖父容器是否显式设高，只要它有定位上下文，就能垂直拉满。
推荐写法：
/* 父容器 */
.parent {
position: relative;
}
<p>/<em> 子元素 </em>/
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}</p>
- 这组四值等价于
inset: 0，语义更简洁，但 IE 和旧版 Safari 不支持，生产环境慎用 - 如果只要高度拉满、宽度保持内容宽度，就只写
top: 0; bottom: 0，别碰left/right - 同时设了
width和left+right会冲突：width优先级更高，自动宽度逻辑被绕过
padding、border 会让“撑满”看起来没到位
top: 0; right: 0; bottom: 0; left: 0 是让子元素的**边框外边缘**贴住父容器的 content box 边缘。如果父容器有 padding 或 border，子元素就会顶在 padding 内侧，而不是视觉上的“内边沿”——这不是 bug，是 CSS 盒模型的正常行为。
常见表现：父容器设了 padding: 20px，子元素背景没铺满整个可视区域，留出白边。
- 解决方案一：把
padding和border移到子元素上（适合背景色/边框由子元素承担的场景） - 解决方案二：用
calc()补偿，例如left: calc(0px + 20px)（前提是父容器 padding 固定） - 解决方案三：父容器用
box-sizing: border-box+ 显式设置width/height，再让子元素inset: 0，但依然不解决 padding 偏移问题
overflow: hidden 下撑满了也看不见
父容器设了 overflow: hidden，子元素虽然 top/bottom 拉满、尺寸正确，但内部内容（比如大字号文字、transform: scale(1.2) 的图片、负 margin 元素）仍可能溢出并被裁切——脱离文档流 ≠ 脱离 overflow 控制。
调试建议：
- 临时加
outline: 1px solid red到子元素，确认是否真被裁切，还是背景色没设或透明 - 检查子元素内部是否用了
transform、scale、translateZ等可能提升图层但扩大渲染边界的操作 - 若需保留 overflow 控制，又想显示溢出内容，可改用
clip-path或调整子元素内部布局，而非放宽父容器 overflow
真正卡住的往往不是四值写没写对，而是父容器的定位上下文、高度上下文、盒模型和 overflow 规则没协同好。调样式前先看 computed 值，比反复改子元素快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
