css - 显示固定 'modal' div 时的页面切换

Question

所以我在 backbone.marionette 中构建了自己的自定义模态框，但我遇到了一个问题，即每次我 show() 模态时，我的页面都会向下移动大约半个英寸。很烦人。有人知道如何解决这个问题或解决这个问题吗？

这是我的 #modal 和 .overlay CSS:

#modal {
    position: fixed;
    top: 0;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index: 1002;
    width: 70%;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 1001;
}

Answer 1

找到了一个解决方案 - 如果我将模态的 top 属性设置为 0 并给它一个 margin-top 任何东西，那么就没有了恼人的抵消。这是我最终使用的 CSS:

#modal {
    position: fixed;
    top: 0;
    left:0;
    right:0;
    margin-top: 2em;
    margin-left:auto;
    margin-right:auto;
    z-index: 1002;
    width: 70%;
}