如何解决页面预加载前Progress Bar提前显示的问题（需保留.progress的position:relative属性）

问题分析 #

你遇到的核心矛盾很明确：.progress的position:relative是绝对定位的.progress_text正常显示的必要条件，但这个属性会让进度条在页面预加载阶段（loader遮罩还未消失时）就提前出现在页面上，破坏了预加载的视觉效果。

可行解决方案 #

这里有几个不用删除position:relative就能完美解决问题的思路，你可以根据需求选择：

方案1：给.progress添加初始隐藏样式，在loader消失时同步显示

我们可以给.progress设置初始的不可见状态，然后在loader完全淡出的回调里恢复它的显示，既保留核心定位属性，又能让进度条在预加载完成后才出现，还能加过渡动画让显示更自然。

修改后的代码如下：
首先更新CSS：

.progress {
  margin-bottom: 0;
  color: black;
  text-align: center;
  position: relative;
  /* 添加初始隐藏样式 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease; /* 可选：添加过渡动画提升体验 */
}

/* 定义显示状态的类 */
.progress.show {
  visibility: visible;
  opacity: 1;
}

然后修改jQuery代码，在loader淡出完成后触发进度条显示：

$(window).on("load", function() { 
  $(".loader-container").fadeOut(1000, function() {
    // loader淡出完成的回调：显示进度条
    $(".progress").addClass("show");
  }); 
});

方案2：提升loader-container的z-index层级

这个方案更简单，直接通过层级关系让loader始终覆盖在所有页面元素之上，即使进度条提前渲染也会被完全遮住。默认fixed定位的元素层级已经高于relative，但可以手动设置一个足够大的z-index确保万无一失：

修改.loader-container的CSS：

.loader-container {
  width: 100%;
  height: 100vh;
  background-color: black;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 设置足够高的层级，确保覆盖所有页面元素 */
}

方案3：用display:none初始隐藏进度条（无过渡版）

如果不需要过渡动画，也可以直接用display:none初始隐藏进度条，在页面加载完成后再显示：

.progress {
  margin-bottom: 0;
  color: black;
  text-align: center;
  position: relative;
  display: none;
}

$(window).on("load", function() { 
  $(".loader-container").fadeOut(1000);
  $(".progress").show();
});

方案有效性说明 #

• 方案1和3都是通过控制进度条的显示时机，让它避开预加载阶段，完全保留了position:relative对.progress_text的定位作用。
• 方案2利用CSS层级特性，从视觉上遮挡提前渲染的进度条，不需要修改进度条的任何核心样式，实现成本最低。

亲测这几个方案都能解决你的问题，选最适合你项目需求的就行~

内容的提问来源于stack exchange，提问作者Berserk Wolf