一个滚动页面

Question

上围绕一个div我有以下代码：

<div id="overlay" style=" 
    display: none; 
    border: solid #aa0 10px; 
    width: 75vh; 
    height: 80vh; 
    z-index: 650; 
    position: absolute; 
    left:50%; top: 50%; 
    transform: translate(-50%, -50%)" 
> 

它初时是隐藏的，但如果我点击特定的屏幕元素我有一个与show()显示它的一些jQuery代码。

该中心完全如果页面不滚动，但是，如果当用户点击屏幕元素的一个滚动页面时，覆盖会出现中心仿佛页面没有滚动。 （即，即使它不在视图中，它也将居中在页面的顶部）。

我怎样才能解决这一问题，以便它在视口中中心无论身在何处滚动页面时什么？

Answer 1

你需要从绝对到固定

<div id="overlay" style=" 
    display: none; 
    border: solid #aa0 10px; 
    width: 75vh; 
    height: 80vh; 
    z-index: 650; 
    position: fixed; 
    left:50%; top: 50%; 
    transform: translate(-50%, -50%)" 
>