页脚覆盖我的加载屏幕

Question

我在我的个人网站上制作了一个加载屏幕。在我测试时，我发现当我进入网站时，页脚将覆盖我的加载屏幕。

当我进入网站时，我希望我的加载屏幕覆盖整个屏幕。我怎么能这样做？

这是我的代码，css和js。

<footer class="cfooter navbar-fixed-bottom text-center" id="cfooter">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-lg-12">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">Powered by <a href="https://www.makercyf.com/" target="_blank">MAker</a></div>
            <div class="col-lg-4"></div>
        </div>
        <div class="row">
            <div class="col-lg-12">&nbsp;</div>
        </div>
        <div class="row">
            <div class="col-lg-12">&nbsp;</div>
        </div>
    </div>
</footer>

#cfooter {
    display: block;
    border: 1px solid 000000; 
    height: 100px;
    text-align: center;
    background-color: #000000;
    color: #fff;
    font-size: 15px;
}

div.load_screen {
        position:fixed;
        width: 100%;
        height: 100%;
        background: white;
    }

img.load_screen {
        z-index: 9999999;
        position: fixed;
        left: 50%;
        top: 50%;
        margin: -27px 0 0 -95px; /* -image-height/2 0 0 -image-width/2 */
        background: white;
    }

$(function() {
        $("div.load_screen").fadeIn("slow")
        setTimeout(function() {
            $("div.load_screen").fadeOut("slow")
        }, 3000);
    })

Answer 1

将div.load_screen添加到{{1}}

Answer 2

添加#cfooter {z-index：1} 并添加顶部和左侧0。

div.load_screen {
        position:fixed;
        width: 100%;
        height: 100%;
        background: red;
        top: 0;
        left:0;
    }

这是工作示例。我添加了红色背景只是为了测试它： https://jsfiddle.net/o7wd4mfp/4/