top/right/bottom/left 的参考系是最近的定位上下文，默认为视口，父元素设 position: relative/absolute/fixed 时可成为新上下文；top 只对非 static 元素生效，与 margin-top 机制本质不同。
top/right/bottom/left 的参考系到底是谁？
它们不是相对于屏幕，也不是相对于父元素的 padding 区域，而是相对于**最近的「定位上下文」（positioning context）**。这个上下文默认是初始包含块（通常是视口），但一旦父元素设置了 position: relative、position: absolute 或 position: fixed，它就可能成为子元素的定位参考。
- 如果父元素没设
position（或设为static），子元素的top就往上找，直到找到html根元素为止 -
position: relative不改变文档流位置，但能创建新的定位上下文——这点常被忽略，导致absolute子元素“飞走” -
position: fixed的参考系永远是视口，和父级overflow无关；而absolute会受父级overflow: hidden截断
为什么 top: 20px 和 margin-top: 20px 看起来一样，但行为完全不同？
视觉上可能重叠，但底层机制天差地别：margin-top 推动的是文档流中的位置，影响其他元素布局；top 是脱离文档流后的偏移，不占空间、不影响兄弟元素。
-
top只对position值为relative、absolute、fixed或sticky的元素生效；对static元素写top完全无效 -
top: 20px是从定位上下文的上边缘往下量 20px；margin-top: 20px是从自身上 border 边缘往上推 20px - 当元素有
transform: translateY()时，top值仍参与定位计算，但最终渲染位置是两者叠加——容易造成意外重叠
left/right 同时设置会怎样？浏览器怎么决定用哪个？
当 left 和 right 都显式设置了值（且非 auto），且容器宽度固定，浏览器会优先满足 left，把 right 当作冗余约束忽略——除非 width 被设为 auto，此时会按公式 width = containerWidth - left - right 反向计算宽度。
- 如果
left: 10px、right: 20px、width: 100px，那么right实际不起作用，元素宽 100px，左边缘距参考系 10px - 如果
left: 10px、right: 20px、width: auto，则元素宽度 = 父容器宽 − 30px，左右同时生效 - 在 RTL（如
dir="rtl"）环境下，left/right行为不变，但视觉方向反转——别靠直觉猜，要实测
absolute 定位元素的坐标系会被哪些 CSS 属性干扰？
最常踩坑的是 overflow、transform 和 will-change：它们会悄悄创建新的包含块或改变定位参考，让 top/left 突然“失效”或偏移。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden、scroll、auto在父元素上启用时，若该父元素已是定位上下文，则absolute子元素会被裁剪——但坐标原点仍是父元素的 content box -
transform非none的父元素会强制创建新的定位上下文（CSS 规范明确要求），此时子元素的top就不再相对于最初那个relative父级了 -
will-change: transform也可能触发同样的新包含块行为，即使还没真正应用 transform
坐标系不是画在纸上的一次性设定，它是运行时动态计算的。每次改动父级的 position、overflow、transform，都可能重置子元素的参考原点——这点没法靠“记住规则”解决，得靠 DevTools 的 Layers 面板或“Layout Shift Regions”实时看。
