position: absolute元素宽高“消失”是因脱离文档流后默认收缩为内容尺寸，需显式设置宽高、inset:0或min-width/min-height，并确保父级有position:relative以确立包含块。
为什么 position: absolute 元素宽高经常“消失”或“撑不开”
因为 absolute 元素脱离文档流后，若未显式设置 width 或 height，其尺寸会退化为“内容包裹（shrink-to-fit）”行为：块级元素宽度默认收缩为 0（除非有内联内容），高度则仅包裹子内容。这不是 bug，是规范定义的行为。
常见现象包括：div 看不见、背景色不显示、点击区域丢失、transform 锚点错位。
- 只设
top和left，没设width/height→ 元素视觉上“消失” - 子元素用
display: flex但父级absolute无宽高 → flex 容器不占空间，子项无法布局 - 用
inset（如inset: 0）替代四边偏移 → 宽高自动拉满，但兼容性有限（IE 不支持）
inset 能一键铺满，但要注意浏览器支持
inset 是 top/right/bottom/left 的简写，设为 inset: 0 相当于 top: 0; right: 0; bottom: 0; left: 0，此时元素会填满包含块（containing block），宽高自然确定。
但它依赖包含块有明确尺寸（比如父级设了 position: relative 且自身有宽高），否则仍可能失效。
立即学习“前端免费学习笔记（深入）”；
/* 推荐：现代写法，简洁明确 */
.element {
position: absolute;
inset: 0; /* 等价于 top/right/bottom/left: 0 */
}
/ 兼容写法（需支持 IE） /
.element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
注意：inset 在 Safari 14.5+、Chrome 89+、Firefox 63+ 支持；Edge 基于 Chromium 后也支持。若项目需兼容 IE11 或旧版 Safari，必须用四边展开写法。
用 min-width/min-height 防止内容塌缩
有些场景不能/不想固定宽高（比如响应式弹窗、动态卡片），但又怕空内容导致元素“缩没”。这时用 min-width 和 min-height 比直接设 width/height 更安全。
-
min-width: 200px：内容再少，宽度也不小于 200px -
min-height: 40px：哪怕没文字、没子元素，高度也有 40px，背景/边框可见 - 配合
max-width和width: fit-content可实现“弹性伸缩但有底线”
特别适合图标按钮、带遮罩的图片容器、空状态提示层等。
父容器没设 position: relative 导致定位基准错乱
absolute 元素的包含块，不是最近的父级 div，而是“最近的已定位祖先（position ≠ static）”。如果漏了给父容器加 position: relative，它就会上溯到 body 或 html，导致偏移值参照整个视口计算 —— 此时你调 top: 20px，可能出现在屏幕顶部之外。
这个错误不会报错，但宽高表现会不可控（比如你以为它该在卡片右上角，结果飞到页面右上角，还因脱离上下文而无法继承父级 width）。
- 检查父级是否写了
position: relative（或absolute/fixed） - 避免对
body直接设overflow: hidden同时又让子absolute依赖它做包含块 - 用浏览器开发者工具的“Computed”面板看
Containing Block是谁，比猜更可靠
显式尺寸只是表象，真正难控的往往是定位上下文没立住。宽高问题，八成出在包含块没框定清楚。
