javascript - 用图层覆盖整个页面

Question

我有一个非常复杂的单页应用程序，加载时间大约为 20 秒。 在加载期间，我不想向用户显示页面。

因此，我创建了一个具有 100% 高度和 100% 宽度、最大 z-index 和绝对位置的层。我在开始加载到主体之前附加了这一层。

$(loaderHTML).appendTo('body');


#mainLoader {
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgb(32, 35, 42);
    position: absolute;
    top: 40px;
}

Layer 完成这项工作 - 它在开始时覆盖了整个页面，但是随后，当页面上创建了新元素并且页面高度变大时，用户会在底部看到未覆盖的元素。

即使页面改变了它的高度，我如何制作覆盖整个页面的图层？

Answer 1

编辑:absolute 位置不起作用，但 fixed 起作用。不知道为什么

#mainLoader { 
    z-index:1000 ; 
    width:100 %; 
    height:100 %; 
    background: rgb(32 ,35 ,42 ); 
    position: fixed; 
    top: 0%;
    left: 0%;
    overflow: hidden;
}