使用CSS z-index实现加载器层级置顶的问题求助

要让加载器覆盖在列表上方且不挤压列表，需从脱离文档流和正确使用z-index两方面调整：

核心问题分析 #

• #loader的z-index:100px是错误语法，z-index值应为纯数字，不能加单位。
• 默认元素是static定位，这种定位下z-index不生效，且元素会占据文档流空间，导致列表被挤下移。

修改后的代码 #

CSS 部分 #

#app {
  position: relative; /* 让子元素的绝对定位基于此容器 */
  min-height: 100vh; /* 确保容器占满视口高度，方便加载器居中 */
}

ul {
  z-index: 10;
  position: relative; /* 让z-index生效，确保列表在加载器下方 */
}

#loader {
  border: 20px solid orange;
  border-top: 20px solid #fff; /* 补全顶部边框颜色，显示旋转效果 */
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 2s linear infinite;
  /* 关键：绝对定位脱离文档流 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
  z-index: 100; /* 正确数字值，优先级高于列表 */
  background: rgba(255,255,255,0.8); /* 可选：加背景色提升加载器辨识度 */
}

@keyframes spin {
  0% { transform: rotate(0deg) translate(-50%, -50%); }
  100% { transform: rotate(360deg) translate(-50%, -50%); }
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div id="loader"></div>
  <ul>
    <li>addsassadsdsadsadsaasdddaadsadadsdsadsadasdadsadaddsadsadsdsadsasadas</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
  </ul>
</div>

关键改动说明 #

1. 给父容器#app设置position: relative，让加载器的绝对定位基于容器，避免偏移到页面外。
2. 给#loader设置position: absolute，脱离文档流，不再占据空间挤压列表。
3. 修正z-index语法错误，设置比列表更高的数值，确保加载器显示在上方。
4. 用top:50% + left:50% + transform:translate(-50%,-50%)实现加载器完美居中，不受自身尺寸影响。
5. 给ul加position: relative，确保其z-index生效，被加载器覆盖。

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