即使页面是可滚动的，也可以在屏幕中居中覆盖

Centering overlay in the screen even if the page is scrollable

本文关键字：也可以 屏幕 中居 覆盖 滚动      更新时间：2023-09-26

所以我想创建一个覆盖所以我创建了一个div叫做" background "在里面有一个div叫做" overlay-box "，就是会弹出的那个。所以我的问题是，由于页面是可滚动的，我希望弹出框在中心，无论屏幕的焦点是在底部还是在顶部的页面。

.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);
    }

.background {position:fixed}

相关文章：