如何在NextJS项目中让tsParticles置于其他元素后方？

1. 调整粒子背景组件的定位与层级 #

修改ParticleBackground组件的外层容器，添加Tailwind定位类，让它成为不干扰布局的背景层：

'use client'

import React from 'react';
import { useCallback } from 'react';
import { loadFull } from 'tsparticles';
import Particles from 'react-tsparticles';

const ParticleBackground = () => {
  const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await console.log(container);
  }, []);
  
  return (
    // 添加fixed inset-0 z-0：固定占满视口，层级设为最低
    <div id='particle-background' className="fixed inset-0 z-0">
      <Particles
        id='tsparticles'
        init={particlesInit}
        loaded={particlesLoaded}
        options={{
            background: {
                color: {
                    value: "#0d47a1",
                },
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: "push",
                    },
                    onHover: {
                        enable: true,
                        mode: "repulse",
                    },
                    resize: true,
                },
                modes: {
                    push: {
                        quantity: 4,
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4,
                    },
                },
            },
            particles: {
                color: {
                    value: "#ffffff",
                },
                links: {
                    color: "#ffffff",
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1,
                },
                move: {
                    direction: "none",
                    enable: true,
                    outModes: {
                        default: "bounce",
                    },
                    random: false,
                    speed: 6,
                    straight: false,
                },
                number: {
                    density: {
                        enable: true,
                        area: 800,
                    },
                    value: 80,
                },
                opacity: {
                    value: 0.5,
                },
                shape: {
                    type: "circle",
                },
                size: {
                    value: { min: 1, max: 5 },
                },
            },
            detectRetina: true,
        }}
      />
    </div>
  );
};

export default ParticleBackground;

2. 修复页面组件的类名错误与层级设置 #

• 移除main类名中的无效逗号（之前的lg:px-40, z-2里的逗号会导致Tailwind无法识别后续样式）
• 确保页面内容的层级高于粒子背景，同时可给页面背景添加透明度（可选）

修改后的Page组件核心结构：

export default function Page() {
  return (
    <div className="relative min-h-screen">
      <ParticleBackground />
      
      <head>
        <title>Portfolio</title>
        <meta name="description" content="Blank"></meta>
        <link rel="icon" href="/icon.ico" type="image/x-icon" />
      </head>
      
      // 移除逗号，保留z-10确保内容在粒子上方；bg-white/90可选，让粒子透过背景可见
      <main className='bg-white/90 dark:bg-black/90 px-10 md:px-20 lg:px-40 relative z-10'>
        {/* 原有页面内容 */}
      </main>
    </div>
  )
}

关键要点 #

• fixed inset-0：让粒子背景固定覆盖整个视口，不占据文档流，页面内容可正常布局在上方
• z-0与z-10：明确层级关系，粒子背景在最底层，页面内容在上方
• 移除无效逗号：之前的类名错误是导致z-index设置不生效的原因之一
• 半透明背景（bg-white/90）：如果需要看到粒子透过页面，保留该设置；若要完全遮挡粒子，改用bg-white

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