javascript - 即使页面可滚动，也会在屏幕中居中叠加

Question

所以我想创建一个叠加层，所以我创建了一个名为“背景”的 div，其中有一个名为“overlay-box”的 div，它将弹出。所以我的问题是，由于页面是可滚动的，所以无论屏幕的焦点是在页面的底部还是顶部，我都希望弹出窗口位于中心。

.background {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        height:100%;
        width: 100%;
        cursor: pointer;
        z-index: 1000; /* high z-index */
        background: #000; /* fallback */
        background: rgba(0,0,0,0.75);
}

.overlay-box{
        background: #fff;
        padding: 1%;
        width: 50%;
        position: relative;
        top: 15%;
        left: 50%;
        margin: 0 0 0 -20%; 
        cursor: default;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.9);
    }

Answer 1

.background {position:fixed} 在后台更改它。