Question

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

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

这是我的代码，css和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

将 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 与其容器相关，因此您的图片仅位于 div.load_screen 元素中的所有内容之上。

由于导航栏在HTML后面出现，它将位于加载屏幕上方，因为它们都没有设置z索引。

导航栏覆盖我的加载屏幕

1 个答案: