如何通过CSS设置元素层级？解决粒子动画悬浮于页面元素上方问题

问题根源是绝对定位的粒子容器默认层级高于静态/相对定位的页面元素，只需调整CSS的z-index属性并修正定位上下文即可解决：

具体修改步骤 #

1. 为父容器设置相对定位
   给包裹所有内容的.area容器添加相对定位，确保粒子的绝对定位是相对于页面内容区域，而非整个文档：

   .area {
     position: relative;
   }
   

2. 降低粒子容器的层级
   在.circles的CSS中添加z-index: -1，让粒子容器的层级低于其他默认元素：

   .circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: -1; /* 新增此行 */
   }
   

修改后的完整粒子CSS代码 #

.area {
  position: relative;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgb(17, 218, 94, 0.4);
  animation: animate 25s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

说明 #

• 因为你的导航栏和内容框都设置了不透明背景（bg-white、bg-slate-50），粒子会被这些元素完全遮挡，只显示在空白背景区域。
• 如果后续有其他绝对定位元素需要显示在粒子上方，只需确保它们的z-index值大于-1即可。

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