absolute元素宽高“消失”是因脱离文档流：不参与父高计算、不继承父宽，浏览器按内容最小尺寸渲染；需显式设置left/right或width/height等约束，height:100%依赖包含块有明确高度，flex中width失效因flex-basis优先级更高，父容器高度为0是正常行为。
absolute元素宽高“消失”是因为脱离文档流
不是CSS写错了，是position: absolute让元素彻底退出文档流——它不再参与父容器高度计算，也不自动继承父宽，浏览器只能按“内容最小尺寸”渲染。常见表现：空div变成0×0，文字只占一行宽，width: 100%没反应。
验证方式很简单：临时删掉position: absolute，看宽高是否立刻恢复正常。如果恢复了，问题就锁定在这里。
- 必须显式设置横向约束：
left和right一起用（如left: 20px; right: 10px;），或width+left，单写left无法推导宽度 - 高度同理：只写
top不写bottom或height，浏览器默认按内容撑开，常导致高度塌陷 - 若想填满定位上下文，优先用
top: 0; bottom: 0; left: 0; right: 0;，比width: 100%; height: 100%更可靠
height: 100%在absolute里总算错，是因为包含块没高度
height: 100%不是按DOM树里的父元素算，而是找最近的position: relative/absolute/fixed祖先——如果它自身height是auto，那100%就等于0px。Safari 14–15.6还会直接忽略这种组合，连min-height: 100vh都可能失效。
- 检查开发者工具Computed面板，看该元素的
height是不是0px或auto；往上点父节点，找到第一个height: auto的，就是断点 - 修复不是加
position: relative就够了，得给那个祖先加可计算高度：比如min-height: 100vh、height: 400px，或flex: 1（但要确保父容器有明确高度） - 更稳的替代方案：放弃
height: 100%，改用top: 60px; bottom: 20px;，完全绕过百分比继承链
flex容器里写width/height像没生效？其实是被flex-basis压住了
flex: 1本质是flex-basis: 0%，它优先级高于width，所以你写的width: 200px根本没机会参与计算。再加上默认min-width: auto强制撑开内容宽度，盒子就会“该缩不缩、该展不展”。
立即学习“前端免费学习笔记（深入）”；
- 显式覆盖
flex-basis：flex: 1 1 auto或直接写flex-basis: 200px - 必须设
min-width: 0（水平方向）或min-height: 0（垂直方向），否则长单词、图片原始宽会把盒子顶开 - 注意
display类型：inline元素在flex里照样无视width，得先改成display: inline-block或block
父容器高度为0但absolute子元素明明看得见
这不是bug，是规范行为：position: absolute元素完全不参与父容器高度计算。哪怕你在父容器里放了5个bottom: 0的弹窗，父容器高度还是0。
如果业务上真需要父容器“感知”这些绝对定位元素的高度，JS是目前最可控的方式：
- 别用
offsetHeight或getBoundingClientRect().height——它们只返回元素自身尺寸，不反映在父坐标系中的实际落点 - 正确做法：用
ResizeObserver监听每个absolute子元素，取所有getBoundingClientRect().bottom的最大值，减去父容器getBoundingClientRect().top，结果写入父容器的style.minHeight - 关键细节：要在回调里减掉父容器自身的
padding-top和border-top，否则高度会多出一截
真正容易被忽略的是：这个高度计算必须等字体、图片、异步加载内容全部渲染完成才能执行，DOMContentLoaded阶段取值大概率不准。
