CSS：防止固定元素与滚动条重叠

对于我的应用程序，我使用react路由器在页面之间创建转换。问题是：我想做一个“窗口内窗口”的效果，使过渡工作，但有一个问题。我能够使用

transform:translate3d（0,0,0）创建堆叠上下文。为了使固定元素保持在顶部，而不随上下文滚动，我需要在其中包含另一个元素，该元素将容纳溢出的内容

以下是我尝试过的：


document.getElementById（'content'）.innerHTML='content here'。重复（500）
html，正文{
保证金：0；
高度：100vh；
宽度：100vw；
}
.窗户{
背景：紫罗兰属；
高度：100vh；
宽度：100vw；
溢出：隐藏；
/*我可以用绝对位置，不要这样想
但这很重要*/
位置：相对位置；
变换：translate3d（0,0,0）；
}
.根{
身高：100%；
宽度：100%；
位置：相对位置；
溢出：自动；
}
标题{
背景：绿松石；
颜色：白色；
高度：2em；
位置：固定；
顶部：0；左侧：0；右侧：0；
}

这里有一些内容

溢出y：自动；溢出-x：自动；我们可以解决这样的问题
溢出y：自动；溢出-x：自动；我们可以解决这样的问题
@04FS，我用谷歌搜索了我的问题，但没有一个答案适合我的情况。也许我应该添加更多细节，但我不想在
.window
之外重新构造任何内容，我想保留堆叠上下文。另外，在将鼠标悬停在
.window
上时能够滚动页面也很重要，然后您可能需要通过确定实际的滚动条宽度来计算页眉的适当宽度。首先是.root的剩余宽度。无论是
100%
还是
100vw
都不能单独帮助您-通过
html
元素与视口之间的映射，您将获得这方面的内置“魔力”，但通过将事情向下移动到较低级别，这不再适用。@04FS，我搜索了我的问题，但没有一个答案适合我的情况。也许我应该添加更多细节，但我不想在
.window
之外重新构造任何内容，我想保留堆叠上下文。另外，在将鼠标悬停在
.window
上时能够滚动页面也很重要，然后您可能需要通过确定实际的滚动条宽度来计算页眉的适当宽度。首先是.root的剩余宽度。无论是
100%
还是
100vw
都无法单独帮助您-通过
html
元素与视口之间的映射，您将获得这方面的内置“魔力”，但通过将事物向下移动到较低级别，这将不再适用。如果我这样做，就像
窗口
滚动一样，它里面的所有固定元素也会滚动，这不完全是我想要的。如果我这样做，就像
.window
滚动一样，它里面的所有固定元素也会滚动，这不完全是我想要的
.window{overflow-y: auto;}