绝对定位元素填满父容器需父容器设置非static的position（如relative），且避免margin/padding/border干扰；四边定位比width/height百分比更可靠，因不依赖父容器显式高度；inset:0是其语法糖但兼容性有限。
绝对定位元素填满父容器的常见写法失效了？
直接给结论：top: 0; right: 0; bottom: 0; left: 0 确实能填满，但前提是父容器有明确的 position 值（relative、absolute 或 fixed），且自身没被其他 CSS 干扰。很多人卡在这一步，不是写法错，是上下文没配齐。
- 父容器必须设置
position: relative（最常用）或其它非static值；否则top/bottom会相对于 viewport 计算 - 子元素若设置了
margin、padding或border，会撑出滚动条或溢出——填满的是 content box，不是 border box - 如果父容器高度由内容撑开，而子元素又用了
bottom: 0，可能触发“收缩”行为（尤其在 flex 容器里嵌套时）
为什么 width: 100% 和 height: 100% 不如四边定位可靠？
因为百分比宽高依赖于父容器的「已知尺寸」：若父容器高度是 auto（比如没设 height 或 min-height），height: 100% 就会计算为 0 —— 这是 CSS 规范决定的，不是 bug。
-
top/bottom/left/right四值定位不依赖父容器显式高度，只依赖其position上下文 - 但要注意：如果父容器本身高度不确定（比如文字流式布局），填满后可能把内容“盖住”，需确认是否真需要“视觉填满”而非“尺寸继承”
- 在 Grid 或 Flex 容器中，绝对定位子元素会脱离文档流，
width: 100%可能按网格轨道算，而四边定位仍按最近定位祖先算——结果不一致
遇到 overflow: hidden 父容器，填满后内容被裁切怎么办？
这是典型“填满了，但看不见”的问题。绝对定位元素虽然占满空间，但如果父容器设置了 overflow: hidden，且子元素内部有超出（比如大字体、负 margin、transform 位移），就会被裁掉。
- 先检查子元素是否有
transform（尤其是scale或translateZ），它可能让渲染层溢出边界 -
overflow: hidden对position: absolute子元素依然生效，别误以为“脱离文档流就免疫” - 临时调试可用
outline: 1px solid red套在子元素上，看是否真被裁切，还是只是背景没铺满
用 inset 替代四边写法更简洁，但兼容性要留意
inset: 0 是 top: 0; right: 0; bottom: 0; left: 0 的语法糖，语义更清晰，但不是所有环境都支持。
立即学习“前端免费学习笔记（深入）”；
- Chrome 102+、Firefox 103+、Safari 16.4+ 支持；旧版 Safari（尤其 iOS 15.x）不认
inset - PostCSS 或构建工具里加 Autoprefixer 无法补全
inset，它不属传统前缀属性，得靠自己降级 - 如果项目要兼容 IE 或老 Android WebView，老老实实用四边写法，别贪简
真正容易被忽略的点是：绝对定位填满后，元素的 box-sizing 和父容器的 box-sizing 是否一致；一个用 border-box 一个用 content-box，会导致 1px 级别的错位，在高清屏或缩放场景下特别明显。
