Question

我有以下代码：

<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%)"
>

首先隐藏它，但是如果我点击特定的屏幕元素，我会有一些jquery代码，用show()显示它。

如果页面未滚动，则会完美居中，但是，如果在用户单击其中一个屏幕元素时滚动页面，则叠加层将显示为居中，就像页面未滚动一样。（即即使它不在视野范围内，它也会居中在页面顶部）。

如何解决此问题，使其无论页面滚动到何处都以视口为中心？

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%)"
>

将div放在滚动页面上

1 个答案: