如何将particles-js设为页面背景并让内容显示在前方？

Got it, let's work through this problem! The issue you're facing is a common one with stacking contexts and layout positioning—your particles container is currently taking up its own space in the document flow, and z-index won't do anything useful unless the elements involved are positioned (not using the default static position). Here's a step-by-step fix to get your center content sitting neatly on top of the particle animation:

1. Restructure Your HTML #

Wrap both the particles container and your center content in a parent container. This parent will act as the positioning context for both elements:

<div class="wrapper">
  <!-- Particles container -->
  <div id="particles-js"></div>
  <!-- Your center content -->
  <div class="center-content">
    <h1>Your Main Heading</h1>
    <p>Any text or elements you want front-and-center</p>
  </div>
</div>

2. Add Critical CSS Styles #

This is where the magic happens. We'll make the particles container act as a background layer by using absolute positioning, and ensure your content sits on top with proper z-index:

/* Parent wrapper: establishes a positioning context */
.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh; /* Adjust this if you don't want full viewport height */
  overflow: hidden; /* Prevents particles from spilling outside the wrapper */
}

/* Particles container: fills the wrapper, sits in the background */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Puts particles behind everything else in the wrapper */
  /* Optional: add a background color for better contrast */
  background-color: #222;
}

/* Center content: sits on top, centered in the wrapper */
.center-content {
  position: relative;
  z-index: 1; /* Ensures content is above particles */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff; /* Adjust text color to match your background */
  text-align: center;
  padding: 2rem;
}

3. Verify Particles.js Initialization #

Make sure your particles.js setup is targeting the correct container—no extra styles here should break the layout. A basic initialization looks like this:

particlesJS('particles-js', {
  particles: {
    number: { value: 100 },
    size: { value: 3 },
    color: { value: '#ffffff' }
    // Add your custom particle config here
  },
  interactivity: {
    events: {
      onhover: { enable: true, mode: 'repulse' }
    }
  }
});

Why Your Previous z-index Didn't Work #

By default, all <div> elements use position: static, and z-index has no effect on statically positioned elements. By setting the particles container to position: absolute, we take it out of the document flow (so it doesn't push your content down) and make z-index work as intended. The parent wrapper's position: relative ensures the particles container is positioned relative to it, not the entire page.

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