在这种情况下,为什么`position:fixed`相对于文档而不是视口？

Question

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

我无法在小提琴中重现这个问题.你可以在这里查看: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:

当一个祖先将transform或perspective属性设置为非none之外的东西时,该祖先用作容器而不是视口

您<div class="container">使用的动画包含transform: translateY(...)符合文档中列出的例外情况的动画.因此,您的fixed元素相对于主容器,它确实与页面一起滚动.