top必须配合position使用才生效，否则被忽略；margin-top影响文档流并推挤其他元素，top在absolute/fixed下脱离流，在relative下仅视觉偏移且保留占位。
top 必须配合 position 使用，否则无效
直接写 top: 20px 但没设 position，浏览器会完全忽略它。这不是 bug，是规范行为——top 是定位偏移量，只对已脱离或相对定位的元素起作用。
-
position: absolute或fixed：top相对于最近的已定位祖先（或 viewport）计算 -
position: relative：top相对于元素原本在文档流中的位置偏移，不脱离流 -
position: static（默认）：任何top值都无效
margin-top 影响文档流，top 不影响（除 relative 外）
margin-top 是盒模型外边距，它会推开上方兄弟元素、影响后续元素布局；而 top 在 absolute 或 fixed 下会让元素脱离文档流，不占空间，也不推挤其他元素。
- 用
margin-top: 30px：下方元素会自动下移，整个流被“撑开” - 用
position: absolute; top: 30px：原位置留空，下方元素照常紧贴原来位置，可能被覆盖 - 用
position: relative; top: 30px：视觉上往下移，但原始占位还在，下方元素不会上移
百分比值的参考基准完全不同
margin-top: 10% 和 top: 10% 看起来一样，但计算依据天差地别：
-
margin-top的百分比始终基于**包含块的宽度**（即使它是垂直方向） -
top的百分比基于**包含块的高度**（仅当父元素有明确高度且已定位时才可靠） - 常见坑：
margin-top: 50%在宽 400px 的容器里 = 20px，不是按高度算；而top: 50%在高 200px 的relative父容器里 = 100px
负值行为和用途差异明显
两者都支持负值，但意图和副作用不同：
立即学习“前端免费学习笔记（深入）”；
-
margin-top: -20px：把当前元素向上拉，可能与上一个元素重叠，同时**压缩文档流间距**（上一元素和它之间变近） -
position: relative; top: -20px：仅视觉上抬升，不改变流中位置，下方元素不受影响 -
position: absolute; top: -20px：完全脱离流，可能盖住上面内容，且不参与外边距合并 - 特别注意：
margin-top负值会触发**外边距合并（margin collapsing）**，top不会
margin-top 还是 top + position。很多人卡在“看起来一样”，却忽略了它们对布局上下文的底层干预方式完全不同。 
