CSS“position:fixed”尊重父级的边距属性。为什么？

Question

我的理解是，一旦提供了一个元素

position: fixed

属性，它就会从正常的文档渲染工作流程中删除。但在下面的示例中，固定元素尊重其父元素的

margin-left : 300px

属性。

<div style="height: 100vh; background-color: lightblue; margin-left: 300px;">
  <div style="position: fixed; background-color: tomato; width: 100px; height: 100px;">
    
  </div>
</div>

一旦我提供了

top: 0px;

和

left: 0px

属性，它就会按预期保留在左上角。谁能解释为什么当未提供

margin-left

和

top

属性时，固定元素尊重父元素的

left

？

<div style="height: 100vh; background-color: lightblue; margin-left: 300px;">
  <div style="position: fixed; background-color: tomato; width: 100px; height: 100px; top: 0px; left: 0px;">
    
  </div>
</div>

Answer 1

您观察到的行为是由CSS规范的定位部分定义的：

简短的答案是，它相对于其最近的块级祖先元素（在本例中为其父元素

<div

）定位为 (0,0)，因为您没有为任一轴设置任何 

inset 属性内部 <div>

 元素。

---

长答案需要遵循规范：

插入属性指的是left:

和

right:

（对于水平轴），以及

top:

和

bottom:

（对于垂直轴）。

在您的情况下，因为两个轴中的所有

inset 属性 都未定义，所以它们默认为 auto

，并且当轴中的两个属性都是 

auto

 时，规范会这样说：

如果给定轴中的两个插入属性都是

auto

，则根据相关轴中框的 

self-alignment

 属性：

（在你的情况下，

self-alignment

是

self-start

，出于冗长的原因我不会详细讨论）

...对于

self-start

 对齐或其等效项：将其 

start-edge

 插入属性设置为 

静态位置，并将其 end-edge

 插入属性设置为零。

元素的静态位置的值是通过重新计算盒子的形状/布局/等来确定的，如果使用position: static

（强调他们的）：

当给定轴中的两个插入属性都是

auto

 时，通过将框对齐到其 

静态位置矩形（从框将参与的格式化上下文派生的 对齐容器），将它们解析为静态位置如果它是 position: static

 （独立于其实际包含块）。静态位置表示盒子在 

position: static

 时的近似位置。

对齐容器描述为：

对齐容器是对齐对象在其中对齐的矩形。这是由布局模式定义的，但通常是对齐主题的包含块，并假定建立包含块的盒子的写入模式。

...所以在你的情况下，内部

<div>

的对齐容器是外部

<div>

，因为那是内部

<div>'s

包含块

，因为它默认具有display: block;。