在这种情况下,为什么“位置:固定”相对于文档而不是相对于视口?

我有一个画廊,里面有我创造的灯箱。 灯箱是 position:fixed 和 top:0 . 所以,如果我是对的,它应该在相同的位置,无论我是否向下滚动。不幸的是,事实并非如此。

我无法用小提琴再现这个问题。您可以在这里查看: http://tobiasgla.us/portfolio . 您可以在手机上打开,也可以使用Chrome中的设备工具栏。

以下2个对象得到了 位置:固定 不起作用的属性:

.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;
}

谢谢你的帮助!