html - 在这种情况下，为什么 `position: fixed` 是相对于文档而不是视口(viewport)的？

Question

我有一个画廊，里面有我创建的某种灯箱。 灯箱是 position:fixed 和 top:0。所以，如果我是对的，它应该在同一个位置，不管我是否向下滚动。不幸的是，情况并非如此。

我无法在 fiddle 中重现该问题。您可以在这里查看:http://tobiasgla.us/portfolio .您可以在手机上打开，也可以使用 Chrome 中的设备工具栏。

以下 2 个对象获得了 position:fixed 属性，该属性不起作用:

.item-content{
   width: calc(100% - 100px);
   height: calc(100vh - 100px);
   position: fixed;
   top: 0;
   left: 0;
   margin: 50px;
}
.dupe.dupAnim{
   top:0;
   left:0;
   width:calc(100% - 100px);
   height:250px;
   margin:50px;
   position:fixed;
}

感谢您的帮助!

Answer 1

来自 MDN :

When an ancestor has the transform or perspective property set to something other than none, that ancestor is used as the container instead of the viewport

你的 <div class="container">使用包含 transform: translateY(...) 的动画，这符合文档中列出的异常。因此，您的 fixed元素是相对于主容器的，它确实会随页面滚动。