当top/left/right/bottom同时设值且position为absolute或fixed时，浏览器按盒模型偏移规则计算：width=父宽−left−right，height=父高−top−bottom；relative下仅top/left有效，right/bottom被忽略。
top/left/right/bottom 同时设值时，浏览器怎么算最终位置？
当 position 为 absolute 或 fixed 时，top、left、right、bottom 可以同时设置，但浏览器不会“平均分配”或“优先级叠加”，而是按一套明确的**盒模型偏移规则**计算：它先确定元素的起始边（top + left），再用 right 和 bottom 反向约束宽度和高度 —— 前提是这些值没被设为 auto。
关键点：
-
top和bottom**不能同时生效来决定垂直位置**：若两者都为具体值（如top: 10px; bottom: 20px;），且height未固定，则元素会拉伸填满可用空间（即height被计算为containing block height - top - bottom） - 同理，
left和right同时设值且width为auto时，元素水平拉伸 - 只要任意一个方向的两个偏移值都非
auto，且尺寸未显式固定，该方向就触发“拉伸行为”
为什么设了 top 和 bottom 却没居中？
常见误解是 “top: 50%; bottom: 50% 就能垂直居中”，实际结果往往是元素高度为 0（因为 containing block height - 50% - 50% = 0），甚至可能被裁剪或消失。
真正可靠的垂直居中（无 flex/grid）需满足：
立即学习“前端免费学习笔记（深入）”；
-
top: 50%+transform: translateY(-50%)（推荐） - 或
top: 0; bottom: 0; margin: auto;+ 显式height（否则仍拉伸） - 或使用
top: 0; bottom: 0;配合height: fit-content（注意兼容性）
relative 定位下 top/left/right/bottom 的行为差异
position: relative 的偏移不脱离文档流，top/left 移动后，原占位空间仍在；而 right/bottom 在 relative 下**仅影响渲染位置，不改变布局计算逻辑** —— 它们不会像 absolute 那样参与尺寸反推。
也就是说：
-
top: 10px和bottom: 10px同时写在relative元素上，bottom实际无效（浏览器忽略，或表现为无视觉变化） - 只有
top和left是 reliable 的偏移手段；right和bottom在relative中基本等价于 “不用” - 想右对齐？应改用
right: 0+position: absolute，或用margin-left: auto
IE 和老版 Safari 的兼容陷阱
IE8–IE11 对 top/bottom 同时设值的拉伸行为支持不一致；Safari ≤ 14 在某些嵌套 transform 场景下会错误计算 bottom 值（尤其配合 will-change）。
稳妥做法：
- 避免在 IE 环境中依赖
top + bottom控制高度，改用 JS 计算或额外 wrapper - Safari 中若发现
bottom失效，尝试添加contain: layout到父容器 - 所有涉及多偏移 + 自适应尺寸的场景，务必在真实设备上验证，不要只信 Chrome DevTools
.box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
/* 此时 width/height 由上下左右共同决定：
width = parent width - left - right
height = parent height - top - bottom */
}最易被忽略的一点：这种四边定位看似“方便”，实则把元素尺寸完全交给父容器控制；一旦父容器尺寸动态变化（比如响应式折叠侧边栏），子元素可能意外缩放或溢出——它不是“定位”，而是“留白约束”。
