top: 100% 的 100% 是相对于定位上下文（containing block）的高度计算，而非父元素的 height 值或视口高度；若父元素未触发定位上下文或其计算高度为 auto，则回退至初始包含块（如视口），导致定位异常。
top: 100% 的 100% 是算谁的高度
它算的是**定位上下文（containing block）的高度**，不是父元素的 height 值，也不是视口高度。如果父元素没触发定位上下文（比如没设 position: relative），浏览器会一路往上找，直到 html 或初始包含块——这时候 top: 100% 就等于整个页面高度，必然超出你“以为的父容器”。
为什么加了 position: relative 还是超出去
常见原因是父元素自身高度为 auto，导致它的 containing block 高度不可计算，top: 100% 实际退化为按初始包含块（通常是视口）计算。典型链路断点：
-
html或body没设height，或被 reset 覆盖 - 中间某层用了
float、display: inline-block或position: absolute，导致它不再作为子元素的 containing block - 父容器是 flex/grid 容器，但子项没设
align-self: stretch或min-height: 0，高度塌陷为内容高
用开发者工具选中父元素 → “Computed” 面板看 height：如果是 auto，那 top: 100% 就没参照物。
top: 100% 和 bottom: 0 的行为差异
二者语义完全不同：top: 100% 是“从顶部往下挪一整个 containing block 高度”，结果位置在容器底部外侧；而 bottom: 0 是“把元素底边贴到 containing block 底边”，结果刚好卡在底部内侧。
想让元素紧贴父容器底边，优先用 bottom: 0，而不是 top: 100%。如果必须用 top，且要对齐底部，得配合 transform: translateY(-100%) 把自身拉回来。
绝对定位元素的 height: 100% 也受 same rule 约束
很多人只注意 top，却忘了 height: 100% 同样依赖 containing block 高度。如果父容器没显式高度，height: 100% 就无效，此时即使 top: 0; bottom: 0 也能撑开高度，但那是靠定位拉伸，不是继承。
真正稳定的组合是：
- 父元素设
position: relative+ 显式height（如height: 400px或height: 100vh） - 子元素用
top: 0; bottom: 0; left: 0; right: 0，不依赖百分比 - 或者干脆放弃绝对定位，改用
display: flex+align-items: flex-end
最常被忽略的，是没确认父元素是否真成了 containing block——光写 position: relative 不够，得看 computed height 是否有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
