頁腳封面我的加載屏幕

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

添加#cfooter {z索引：1} 並添加頂部和左側0

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

這裏是工作示例。我已經添加了紅色背景來測試它： https://jsfiddle.net/o7wd4mfp/4/

Answer 2

添加z-index: 999;到div.load_screen