求助：如何在CSS中实现Div叠加以在Rest请求时显示加载Spinner？

嘿，我来帮你搞定这个Spinner叠加的难题！你遇到的z-index没生效的情况，几乎肯定是因为缺少定位属性——z-index只有在元素设置了position: relative、absolute或者fixed的时候才会起作用，光靠z-index是没用的哦。

下面给你一套可行的解决方案，直接套用就能实现遮罩式的加载Spinner：

步骤1：调整HTML结构 #

先确保你的Spinner容器和内容区域在同一个父容器下，比如这样：

<div class="content-wrapper">
  <!-- 这里是你原本的内容Div -->
  <div class="main-content">
    <!-- 你的页面内容 -->
  </div>

  <!-- 加载Spinner容器，用*ngIf控制显示隐藏 -->
  <div class="spinner-overlay" *ngIf="isLoading">
    <div class="loading-spinner">
      <!-- 可以替换成你自己的Spinner动画，比如Font Awesome图标 -->
      加载中...
    </div>
  </div>
</div>

步骤2：添加关键CSS样式 #

这部分是核心，重点是给父容器和Spinner容器设置正确的定位：

.content-wrapper {
  position: relative; /* 关键：让子元素的绝对定位基于这个容器 */
  /* 可以根据你的内容设置最小高度，避免容器高度为0 */
  min-height: 300px;
}

.main-content {
  /* 这里是你原本的内容样式，不需要改太多，除非你之前设置了z-index，确保它比Spinner的小就行 */
  z-index: 1;
}

.spinner-overlay {
  position: absolute; /* 绝对定位，才能叠加在内容上方 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* 半透明白色背景，遮罩内容 */
  z-index: 10; /* 数值比内容的z-index大，确保在最上层 */
  /* 让Spinner居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  /* 自定义Spinner样式，比如添加旋转动画 */
  font-size: 20px;
  font-weight: 600;
  color: #333;
  /* 可选：添加旋转动画 */
  animation: spin 1s linear infinite;
}

/* 旋转动画示例 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

步骤3：控制Spinner的显示隐藏 #

在你的组件类里，记得在发起REST请求时把isLoading设为true，请求完成（成功或失败）后设为false：

isLoading = false;

fetchData() {
  this.isLoading = true;
  this.http.get('你的API地址').subscribe({
    next: (data) => {
      // 处理数据
    },
    error: (err) => {
      // 处理错误
    },
    complete: () => {
      this.isLoading = false;
    }
  });
}

这样设置后，Spinner就能完美叠加在内容Div之上，z-index也能正常生效啦！

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