top和bottom同时设置仅对absolute、fixed、sticky生效，触发height=包含块高度−top−bottom的拉伸计算；relative下bottom被忽略，static下完全无效。
top 和 bottom 同时设置触发浏览器拉伸计算
当 position: absolute 元素同时设置了非 auto 的 top 和 bottom（例如 top: 20px; bottom: 20px;），且未显式声明 height 或设为 auto，浏览器会启动垂直方向的拉伸逻辑：height = 包含块高度 − top值 − bottom值。这不是“居中”或“对齐”，而是强制尺寸推导——它和 left/right 拉伸宽度是同一套机制，互不干扰。
这个计算只在脱离文档流的定位上下文中生效，position: relative 或 static 下完全不触发。
拉伸失效的常见原因：包含块高度不可计算
拉伸结果是否符合预期，几乎完全取决于包含块是否有明确、可测量的高度。以下情况会导致拉伸失败或高度为 0：
- 父容器是
position: relative，但没设height、min-height或flex/grid主轴尺寸 - 父容器自身也是
absolute，且它的包含块高度为auto - 父容器仅靠子元素撑高，而子元素全是
absolute（此时父容器高度坍缩为 0） - 用
vh单位时，在 iOS Safari 中因地址栏遮挡导致视口高度跳变
此时你看到的可能是元素消失、背景不显示、getBoundingClientRect().height 返回 0——不是 CSS 写错了，是浏览器根本没东西可减。
立即学习“前端免费学习笔记（深入）”；
box-sizing 和 margin 会叠加在拉伸结果上
拉伸计算出的 height 是内容区高度，padding 和 border 会额外增加实际占用空间：
- 若
box-sizing: content-box（默认），top: 10px; bottom: 10px;算出高度为 200px，加上padding: 12px和border: 2px，最终占位是 200 + 24 + 4 = 228px - 若
box-sizing: border-box，同样设置下，内容区会被压缩到 200 − 24 − 4 = 172px，总占位仍是 200px -
margin不参与拉伸计算，但它会外推元素位置，可能造成视觉错位或溢出
所以写 top/bottom 拉伸时，务必确认 box-sizing 行为是否与设计一致；全局重置 * { box-sizing: border-box; } 能大幅降低意外。
relative 下写 top + bottom 是无效的
很多人复制了 absolute 的写法到 relative 元素上，比如 position: relative; top: 10px; bottom: 10px;。这不会拉伸，也不会报错——bottom 直接被忽略，只生效 top。
CSS 规范强制规定：relative 元素中对立偏移属性（top/bottom 或 left/right）同时存在时，后一个值被丢弃，与顺序、权重、class 加载无关。
想让 relative 元素“撑满”，只能靠内容、height 显式设置，或改用 flex/grid 布局；别指望 top + bottom 在这里起作用。
真正容易被忽略的，是「谁是包含块」这个前提——所有拉伸都锚定在最近的非 static 祖先上。一旦这个祖先缺失或高度为 auto，top 和 bottom 就只是两个安静的无效声明。
