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