position 为 static 时 top/bottom/left/right 完全无效；因其不参与定位计算，浏览器直接忽略这些属性，需改为 relative/absolute/fixed/sticky 才生效。
position 为 static 时 top/bottom/left/right 完全无效
这是最常被误用的点：很多人写了 top: 20px，但元素没动，翻来覆去调样式也没反应。根本原因是它的 position 值是默认的 static —— 这种定位方式下，top 等属性会被浏览器直接忽略，不参与任何计算。
实操建议：
- 先检查元素的
position是否为relative、absolute、fixed或sticky - 用浏览器开发者工具看 computed 样式，确认
top等值是否出现在“used values”里（若没出现，基本就是static搞的鬼） -
relative是最安全的起点：它不脱离文档流，只在自身位置上偏移，适合调试
absolute 定位的 top/left 是相对于最近的「已定位祖先」
不是相对于 viewport，也不是父元素的 padding box，而是找离它最近的、position 值不为 static 的祖先元素。如果找不到，才退到初始包含块（通常是视口）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 明明给子元素设了
top: 0; left: 0，却卡在页面左上角，不是父容器左上角 → 父容器没设position: relative - 滚动时元素跟着动或不动，取决于祖先是否是
fixed或sticky
性能影响：频繁修改 top/left 触发重排；若配合 transform: translate() 替代，能走合成层，更高效。
top 和 margin-top 看似都能“往下推”，但行为完全不同
top 是定位偏移，改变的是元素在定位上下文中的坐标；margin-top 是外边距，影响的是文档流中与其他元素的间距关系。
使用场景差异：
- 要让一个按钮浮在卡片右上角，用
position: absolute; top: 8px; right: 8px - 要让段落和标题之间空一行，用
margin-top: 16px，而不是top（否则它可能脱离流、压住其他内容） -
top的值可以是负数（往上拉），margin-top负值也会生效，但语义和副作用不同：负 margin 可能导致父容器高度塌陷，而负top不会
IE 中 bottom/right 在某些 position 组合下表现异常
老版本 IE（尤其是 IE8–9）对 bottom 和 right 的解析不稳定，尤其当祖先元素没有明确高度、或同时设置 top 和 bottom 时，可能直接失效或计算错位。
兼容性处理建议：
- 避免在同一个元素上同时写
top和bottom（除非你真需要拉伸高度，且已测试过目标环境） - 用
top+height替代top+bottom更稳妥 - 如果必须支持旧 IE，优先用
margin模拟偏移，或加 JS 补丁
现代项目里，这个坑多数已消失，但一旦接手遗留系统，看到 bottom: 10px 不生效，第一反应该查 IE 模式和文档声明。
