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元素相对于主容器，它确实与页面一起滚动。

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

1 个答案: