Question

我注意到如果我有一个position: fixed的容器，并且我的内部元素也是position: fixed，那么设置内部固定的top和left元素将相对于其固定父元素的偏移量。

但是，我找不到任何相关材料。我发现的每个文档都只说明了相同的简单情况，例如固定元素相对于视口的位置，这似乎不是嵌套固定元素的情况。

示例：

div.container {
  position: fixed;
  top: 100px;
  left: 100px;
  width: 300px;
  height: 300px;
  background-color: yellow;
}

div.child {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="container">
  <div class="child"></div>
</div>

在示例中，红色子div将位于容器DIV的左上角，而不是位于视口的左上角。

有人可以确认一下，并且/或者指向一些有关此行为的官方文档吗？

更新

事实证明，在这个简单的情况下，它按预期工作。在我的实际情况中，固定容器上有一个应用transform: translate(50%, 0)规则，这似乎导致包含的固定元素将此容器作为固定引用。

这种意外行为是否存在任何变通方法或解决方案？

更新2

事实证明，我的问题与此问题完全相同：'transform3d' not working with position: fixed children

固定元件在固定容器内的参考位置

0 个答案: