Navigationsleiste Abdeckung meines Ladebildschirms

Question

Ich habe einen Ladebildschirm auf meiner persönlichen Website erstellt. Während ich teste, finde ich, dass die Navigationsleiste meinen Ladebildschirm abdeckt, wenn ich auf die Website gehe.

Ich möchte meinen Ladebildschirm den gesamten Bildschirm abdecken, wenn ich auf die Website gehe. Wie kann ich das machen?

Das ist mein Code, CSS und 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

Fügen Sie den z-index zu div.load_screen.

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

z-index ist relativ zu seinem Container, so dass nur das Bild innerhalb des Elements div.load_screen über alles sitzt.

Da die Navigationsleiste später im HTML-Code erscheint, wird sie über dem Ladebildschirm positioniert, da keiner von beiden einen Z-Index gesetzt hat.