如何让Modal在页面滚动后仍始终显示于可视区域？

问题出在.modal的定位方式上：原代码使用position: absolute，该定位是相对于最近的已定位父元素（无父元素则相对于整个文档），当页面滚动时，Modal会随文档一起移动，导致内容跑到视口外。

只需修改.modal的定位属性为fixed即可解决，修改后的完整CSS如下：

.modal {
    position: fixed; /* 核心修改：从absolute改为fixed */
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 15% auto;
    padding: 20px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.17), 0 7px 20px 0 rgba(0,0,0,0.17)
}

position: fixed会让元素相对于浏览器视口固定，无论页面如何滚动，Modal遮罩层都会始终覆盖整个可视区域，内部的modal-content通过margin: 15% auto保持居中，用户无需滚动即可直接交互。

内容的提问来源于stack exchange，提问作者sydneyroad