当 position 为 absolute 或 fixed 且 top、left、right、bottom 均设非 auto 时，元素会自动拉伸填满除去四边偏移后的区域，width = 包含块宽度 − left − right，height = 包含块高度 − top − bottom。
top、left、right、bottom 全设非 auto 时，元素会被“撑满”
当 position 是 absolute 或 fixed，且同时设置 top、left、right、bottom 为具体值（如 10px），而 width 和 height 为 auto（或未声明）时，浏览器不会报错，也不会“取平均”或“按顺序覆盖”，而是按盒模型偏移规则计算尺寸：
-
width= 包含块宽度 −left−right -
height= 包含块高度 −top−bottom
也就是说，元素会自动拉伸填满除去四边偏移后的区域。这是最稳定、可预测的“内边距式布局”方式。
.modal-overlay {
position: fixed;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
/* 等效于：宽高由视口减去40px后自动计算 */只设 top + bottom（无 left/right）时，高度拉伸但宽度不拉伸
如果只写 top: 10px; bottom: 10px;，left 和 right 保持默认 auto，那么：
- 垂直方向触发拉伸：
height= 包含块高度 − 20px - 水平方向不拉伸：
width仍由内容、min-width或max-width决定，left和right都是auto，所以元素按常规流排布（除非有margin: auto）
常见误用：想让一个按钮垂直居中+固定宽度，却写了 top: 50%; bottom: auto; —— 这里 bottom: auto 不是“忽略”，而是参与计算：它会让浏览器放弃拉伸逻辑，转而按 top 单边定位。
立即学习“前端免费学习笔记（深入）”；
relative 定位下，对立方向同时设置会失效
position: relative 的行为完全不同：它不改变包含块，偏移只是视觉挪动，元素仍占据原始空间。此时：
-
top和bottom同时设值 →bottom被忽略，仅top生效 -
left和right同时设值 →right被忽略，仅left生效 - 这种“优先级”与 CSS 权重（
!important）、书写顺序、class 顺序都无关，是规范强制行为
所以不要在 relative 中写 top: 10px; bottom: 10px; 试图拉伸——它只会向上偏移 10px，bottom 彻底无效。
auto 是关键开关，不是“占位符”
auto 在这四个属性中不是“无意义默认值”，而是明确告诉浏览器：“这个方向我不约束，请你根据其他条件推导”。例如：
-
left: 0; right: 0;+width: auto→ 水平拉伸 -
left: 0; right: 0;+width: 200px→right失效（LTR 下），元素从左起固定宽 200px -
top: 50%; transform: translateY(-50%)中，bottom: auto是隐式存在的，它阻止了垂直拉伸，让transform能正确居中
真正容易被忽略的点：当你调试一个没反应的 bottom，第一反应不该是“是不是层级错了”，而应检查它的对立方向（top）是否也被设了具体值，以及 height 是否被固定——三者共同决定它有没有机会生效。
