Barre de navigation couverture mon écran de chargement

Question

J'ai fait un écran de chargement sur mon site personnel. Pendant que je teste, je trouve que la barre de navigation va couvrir mon écran de chargement quand je vais sur le site.

Je souhaite que mon écran de chargement couvre l'intégralité de l'écran lorsque j'entre dans le site Web. Comment puis je faire ça?

Ceci est mon code, css et js.

<script src="/assets/js/jquery.min.js"></script> 
<script src="/assets/js/loading.js"></script> 
<div class="load_screen"> 
<img class="load_screen" src="/assets/img/logo_loading.png"> 
</div> 

<!-- Navbar (sit on top) --> 
<div class="w3-top"> 
<div class="w3-bar w3-xlarge w3-black w3-opacity w3-hover-opacity-off baloo"> 
    <a href="https://www.test.com/" class="w3-bar-item w3-button">Home</a> 
    <a href="/test" class="w3-bar-item w3-button">test</a> 
    <a href="/test" class="w3-bar-item w3-button">test</a> 
    <a href="/test" class="w3-bar-item w3-button">test</a> 
</div> 
</div> 

<!-- Navbar on small screens --> 
<div class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium baloo"> 
<a href="https://www.test.com/" class="w3-bar-item w3-button" onclick="toggleFunction()">Home</a> 
<a href="/test" class="w3-bar-item w3-button" onclick="toggleFunction()">test</a> 
<a href="/test" class="w3-bar-item w3-button" onclick="toggleFunction()">test</a> 
<a href="/test" class="w3-bar-item w3-button" onclick="toggleFunction()">test/a> 
</div> 

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

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; 
    } 

This is the screen that when I go into the website

Answer 1

Ajouter le z-index à div.load_screen.

div.load_screen { 
    z-index: 9999999; 
    position:fixed; 
    width: 100%; 
    height: 100%; 
    background: white; 
    top: 0; 
    left:0; 
} 

z-index est par rapport à son récipient de sorte que l'image se trouve au-dessus de tout l'intérieur de l'élément div.load_screen. Comme la barre de navigation vient plus tard dans le HTML, elle sera positionnée au-dessus de l'écran de chargement car aucun des deux n'a d'index z.