position: fixed 元素虽脱离文档流，但未显式设置 top/left 时，其“静态位置”会基于父级块容器（含 margin）计算，导致视觉上偏移——这并非 bug，而是 CSS 规范明确定义的行为。
css 中 fixed 定位元素虽脱离文档流，但未显式设置 `top`/`left` 时，其“静态位置”会基于父级块容器（含 margin）计算，导致视觉上偏移——这并非 bug，而是 css 规范明确定义的行为。
当一个元素设置 position: fixed 但未指定任何 inset 属性（即 top、right、bottom、left 均为默认值 auto），浏览器不会将其简单锚定在视口左上角，而是依据 CSS Positioning Level 3 规范计算其 static position（静态位置）。
根据规范，此时浏览器会模拟该元素处于 position: static 状态下的布局位置，并以此作为 fixed 元素的起始参考点。关键在于：这个“模拟静态布局”的上下文，是它原本应归属的 containing block（包含块） —— 对于普通块级父元素（如 <div>），该包含块正是父元素的内容区域（content box）的边界，<strong>但其定位参考系仍受父元素自身外边距（margin）影响</strong>。<p>来看你的示例：</p>
<pre class="brush:php;toolbar:false;"><div style="height: 100vh; background-color: lightblue; margin-left: 300px;">
<div style="position: fixed; background-color: tomato; width: 100px; height: 100px;">
</div>
</div></pre>
<ul><li>内层 <code><div> 是 <code>fixed 定位，且 top: auto; left: auto;；
<div>（因其为最近的块级祖先）；<li>规范要求：当 <code>left 和 right 均为 auto 且对齐方式为 self-start（默认）时，left 被设为“静态位置”，right 设为 0；static 时，在外层 <div> 中本应出现的水平起点 —— 即外层 <code><div> 的 <code>margin-box 左边缘（含 margin-left: 300px）所决定的文档流位置。因此，你看到的“向右偏移 300px”，其实是 fixed 元素被定位到了父容器 margin-left 边界对应的视口坐标处，而非视口原点。
✅ 正确做法：显式声明 inset 属性，切断静态位置依赖：
div.fixed-element {
position: fixed;
top: 0; /* 显式覆盖 auto */
left: 0; /* 显式覆盖 auto */
width: 100px;
height: 100px;
background-color: tomato;
}
⚠️ 注意事项：
-
position: fixed的包含块始终是初始包含块（initial containing block），即视口；但 静态位置的计算过程 仍需回溯原始 DOM 上下文（含父 margin/padding/border）； - 此行为与
position: absolute不同：absolute 的静态位置基于其最近定位祖先的内容框，而 fixed 的静态位置虽也参考祖先，但最终渲染坐标系是视口； - 若需完全脱离父样式干扰，可将 fixed 元素移出嵌套结构，直接置于
下级，或用transform: translate()辅助微调（但非根本解法）。
总结：fixed 元素“尊重父 margin”是规范驱动的静态位置计算结果，而非渲染逻辑异常。避免隐式 auto inset，始终显式设置 top/left（或 inset 简写），是确保 fixed 定位可预测、跨浏览器一致的关键实践。
