CSS转换到浏览器窗口的左上角

我正在尝试创建一个动画，它接受一个div并将其转换到浏览器窗口的左上角。这能做到吗

我有一个垂直导航链接块，如下所示，当单击

展开

链接时，我当前使用

添加开放类

将

打开

类添加到div中。我希望div从那里滑到屏幕的左上角

let genres=document.querySelector（“.expand”）
generes.addEventListener（'click'，e=>{
让accordion=generies.closest（'.add open class'））
accordion.classList.toggle（'open'）
})

a{
显示：块；
填充：10px；
背景：#fff；
}
.打开{
动画：openAnimation.2s，两者都易于使用；
}
@关键帧打开动画{
0% {
变换：translateY（0）；
}
100% {
转换：translateY（-100%）；
}
}

---

为什么不做如下事情：

。打开{
位置：绝对位置；
宽度：20px；
高度：20px；
背景颜色：橙色；
动画：openAnimation 2s都很容易进入；
}
@关键帧打开动画{
0% {
转换：转换（计算（100vw-50px），计算（100vh-50px））；
}
100% {
转换：翻译（0%，0%）；
}
}

---

在0%时，是否有方法使用当前位置？@GetOffMyLawn当然。只需添加一个

.wrap

并将其相对定位即可。请参阅更新的答案。我的答案越来越近了，但当我这样做时，它几乎会捕捉到页面顶部（第一个链接的正下方），然后将剩下的部分转移到页面top@GetOffMyLawn一定是定位问题。：/现在您更改了问题。但是没有显示带有

.open

元素的HTML的确切外观。也不是什么是完整的

。打开
CSS（完整且与问题相关）