top和bottom同时设置仅对absolute、fixed、sticky定位生效；relative下bottom被忽略，static下两者均无效；absolute元素在未设height时，会按“包含块高度−top−bottom”计算高度。
top 和 bottom 同时设置只对非 static 定位生效
因为 top、bottom 是定位上下文专属的偏移指令，不是通用布局属性。它们只在 position 为 absolute、fixed 或 sticky 时触发拉伸计算；position: relative 下 bottom 被完全忽略；static（默认值）下这两个声明直接被浏览器丢弃——连解析都不做。
absolute 元素同时设 top 和 bottom 会触发高度拉伸计算
当 position: absolute 元素同时设置了 top 和 bottom（且 height 未显式指定或为 auto），浏览器按规范执行：
height = 包含块高度 − top值 − bottom值
- 这个计算与
left/right是否设置无关；只设top和bottom就足以触发垂直方向拉伸 - 如果包含块高度是
auto（比如父容器没设height、min-height或aspect-ratio），拉伸结果不可控：常见表现为高度为 0 或意外撑开 -
margin、padding、border会叠加在计算出的height上，不是“减去”，而是额外增加
relative 元素写 top 和 bottom 不会拉伸
position: relative 不改变包含块，也不启用拉伸逻辑。此时：
-
top和bottom不是对立控制，而是互斥：bottom被规范强制忽略，仅top生效 - 同理，
left和right同时设置时，right被忽略 - 这不是优先级或 CSS 权重问题，跟 class 顺序、书写顺序都无关
误写 top: 10px; bottom: 10px; 在 relative 元素上，只会看到向上偏移 10px，bottom 形同虚设。
真正起作用的是“定位类型 + 包含块是否提供可计算的高度基准”
很多人以为写了 top: 20px; bottom: 20px; 就能撑满可用空间，但实际效果取决于包含块是否具备明确高度：
立即学习“前端免费学习笔记（深入）”；
- 父容器是
position: relative但没设height→ 包含块高度为auto→ 拉伸失效 - 父容器用 flex 或 grid 布局，但没设
min-height或height→ 同样无法可靠拉伸 -
position: fixed时包含块是视口，所以通常稳定；但要注意移动端 Safari 对vh的兼容性偏差 - 想兼容 IE11 等老浏览器，避免依赖
top + bottom拉伸，改用height: 100%+ 显式父高更稳妥
漏掉任意一环，top 和 bottom 就只是两个安静的无效声明。
