父容器高度为0导致absolute子元素transition失效，因子元素脱离文档流且无渲染上下文；需用min-height或padding-bottom为父盒“占位”，或改用transform替代top/left实现可靠过渡。
父容器高度为0时，position: absolute子元素transition失效
绝对定位元素脱离文档流，父容器不设高、又没其他内容撑开，高度就是0。此时给子元素加transition（比如top或opacity），动画根本不会触发——不是bug，是浏览器压根没“变化可渲染”的上下文：父盒无高 → 子盒的top计算基准飘在空中 → 重排/重绘被跳过。
用min-height或padding-bottom给父盒“占位”
不能靠height: auto或height: 100%，它们依赖子内容或祖先高度，而绝对定位子元素不参与高度计算。必须手动给父盒一个“视觉存在感”：
-
min-height最直接：比如min-height: 200px，确保父盒至少有高度，过渡能被观测到 -
padding-bottom适合响应式场景：比如padding-bottom: 56.25%（16:9比例），配合position: relative让父盒保持宽高比 - 避免用
height: 1px或font-size: 0——太脆弱，容易被CSS重置或继承干扰
transform替代top/left做过渡更可靠
即使父盒高度为0，transform仍能触发硬件加速和独立图层，动画不依赖布局上下文：
- 把
top: 20px; transition: top 0.3s换成transform: translateY(20px); transition: transform 0.3s -
transform不影响文档流，也不依赖父盒尺寸，过渡更稳定 - 注意：如果同时用
top和transform，后者会覆盖前者，别混用
检查是否误用了will-change或overflow: hidden
这两个属性看似无关，实则常成为“静默杀手”：
立即学习“前端免费学习笔记（深入）”；
-
will-change: top在父盒无高时可能被浏览器忽略，甚至强制降级；改用will-change: transform更安全 -
overflow: hidden在父盒高度为0时，会裁掉所有绝对定位子元素，导致你根本看不到过渡效果——先临时删掉它验证 - Chrome DevTools 的“Layers”面板能帮你确认元素是否真被提升为独立图层
