position: fixed 元素虽脱离文档流，但未显式设置 top/left/bottom/right 时，其“静态位置”会基于父级块容器（含 margin）计算，而非视口左上角。
css 中 fixed 定位元素虽脱离文档流，但未显式设置 `top/left/bottom/right` 时，其“静态位置”会基于父级块容器（含 margin）计算，而非视口左上角。
在 CSS 定位规范中，position: fixed 的行为并非简单地“固定在视口原点”。它的最终位置由 inset 属性（即 top、right、bottom、left）决定；当这些属性均未显式声明（即取默认值 auto）时，浏览器将依据 静态位置（static position） 进行回退计算。
关键在于：静态位置 ≠ 视口坐标 (0, 0)。根据 CSS Positioned Layout Level 3，静态位置是“该元素以 position: static 渲染时本应占据的位置”的近似值——而这个位置，是在其原本参与的格式化上下文中计算的，也就是它在正常流中的包含块（containing block）。
在你的示例中：
<div style="height: 100vh; background-color: lightblue; margin-left: 300px;"> <div style="position: fixed; background-color: tomato; width: 100px; height: 100px;"> </div> </div>
内层 <div> 的 <code>position: fixed 并不改变其包含块的判定逻辑（注意：fixed 元素的包含块通常是视口，但静态位置的参考系例外）。规范明确指出：当所有 inset 为 auto 时，静态位置矩形（static-position rectangle）源自“它若为 static 时所属的格式化上下文”，即外层 <div> —— 而该父容器设置了 <code>margin-left: 300px，因此其内容区左边界实际位于视口 x=300 处。于是，fixed 元素的静态起始位置（self-start 对齐）被锚定在此处，视觉上表现为“向右偏移了 300px”。
立即学习“前端免费学习笔记（深入）”；
✅ 正确做法：显式定义至少一个轴上的 inset 值，即可绕过静态位置计算，直接相对于视口定位：
/* 推荐：明确指定参照系 */
div.fixed-element {
position: fixed;
top: 20px; /* 相对于视口顶部 */
left: 20px; /* 相对于视口左侧 */
width: 100px;
height: 100px;
background-color: tomato;
}⚠️ 注意事项：
-
margin、padding、border等父容器样式不会影响 fixed 元素的最终布局尺寸或视口坐标，仅在inset: auto时干扰其初始定位参考； - 不要依赖“父 margin 影响 fixed 位置”来实现设计效果——这是静态位置的副作用，行为脆弱且不可控；
- 若需让 fixed 元素与某区域对齐（如侧边栏右侧），应使用
left: 300px或transform: translateX(300px)，而非依赖父 margin。
简言之：position: fixed + inset: auto ≠ “贴着视口左上角”，而是“贴着它本该在流式布局中出现的位置”——而那个位置，受父级盒模型（含 margin）影响。破除误解的关键，永远是显式声明 top/left。
