CSS：位置：固定在位置内部：固定

Question

好的，我注意到了一些东西，但是在CSS规范中找不到。样式化元素position: fixed将相对于浏览器视口绝对定位。如果将固定位置的元素放置在另一个元素内会怎样？CSS示例如下：

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

和HTML：

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

据我所知，该元素相对于其最近的父元素也是固定位置的。这在所有浏览器中都可以使用吗？另外，它是错误还是故意行为？

到目前为止，我在互联网上没有找到关于此主题的任何内容，只是“固定位置使其固定在页面上”。

Answer 1

固定和定位是两个独立的部分。它们的位置与绝对定位的元素相同：相对于其包含的block。但是与绝对定位的元素相反，它们相对于视口保持固定在该位置（即，滚动时它们不会移动）：

盒子的位置是根据“绝对”模型计算得出的，但除此之外，盒子相对于某些参考是固定的。

定位

包含块]的定义说：

如果元素具有“位置：固定”，则在连续媒体（…）的情况下，包含块由视口建立

和

如果元素具有“位置：绝对”，则包含块由最近的祖先建立，其“位置”为“绝对”，“相对”或“固定”（…）

这表明，尽管它们的定位算法是相同的（他们都位于相对于他们的包含块），用于固定的元件包含块总是视口，与绝对定位元素相反，所以它们应该相对于被定位 的是
和而不是任何绝对或固定位置的元素。

事实上，确实如此。例如，如果将添加top: 20px到.fixed，则两个div都将位于距视口顶部20个像素的位置。嵌套的固定div不会从其父对象的顶部向下放置20个像素。

在这种情况下看不到的原因是因为您实际上没有设置任何left / top / right / bottom属性，所以它们的位置由它们在流中的位置决定（它们的“静态位置””），正如我的第一句话所说，它是根据绝对模型完成的。