我的Container正在脱离Particle.js背景

Question

我制作了一个particle.js背景，在此基础上，我制作了一个容器。在这个容器中，我有两个带有一些数据的表，当我缩小屏幕大小时，容器本身就在particle.js背景之外。我也附上了我的问题图片，请看一看。

这是我的一个大学项目，我试图解决它从过去两天，但没有得到任何具体的解决方案。

 <div id="particles-js">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <table class="table">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>

canvas {
  display: block;
  vertical-align: bottom;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100% !important;
  background: #00356B;
}

.container {
  margin-top: 20px;
  position: absolute;
  top: 50%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  color: #fff;
  max-width: 90%;
  padding: 2em 3em;
  background-color: #131415;
  text-shadow: 0px 0px 2px #131415;
  font-family: 'Open Sans', sans-serif;
}

我希望容器在particle.js背景中，但它在后台之外。问题的形象，我有在背景之外的容器

Answer 1

不要将内容放在#particles-js中。

将它们与position:relative放在一个共同的父级中。

由于particles-js的位置是绝对的，如果您希望内容显示在粒子上方，则需要给出它的容器：position: relative; z-index:1;，并确保内容本身没有任何背景(background可以放在普通容器或#particles-js元素上)：

CSS:

.outer-container {
  position: relative;
}
#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #212529; /* could go on .outer-container as well */
}
.outer-container .your-content {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

标记：

<div class="outer-container">
  <div id="particles-js"></div>
  <div class="your-content">
    your contents here
  </div>
</div>

​

工作实例：

​

particlesJS("particles-js", {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 840
      }
    },
    color: {
      value: "#ffffff"
    },
    shape: {
      type: "triangle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 42
      },
    },
    opacity: {
      value: 0.42,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 42,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 210,
      color: "#ffffff",
      opacity: 0.42,
      width: 1
    },
    move: {
      enable: true,
      speed: 4.2,
      direction: "none",
      random: true,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: true,
        mode: "repulse"
      },
      onclick: {
        enable: true,
        mode: "push"
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 420,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 420,
        size: 42,
        duration: 2.1,
        opacity: 8.4,
        speed: 3
      },
      repulse: {
        distance: 84,
        duration: 0.84
      },
      push: {
        particles_nb: 4.2
      },
      remove: {
        particles_nb: 2.1
      }
    }
  },
  retina_detect: true
});

.outer-container {
  position: relative;
}

#particles-js {
  background-color: #212529;
  position: absolute;
  height: 100%;
  width: 100%;
}

.outer-container .table-dark {
  z-index: 1;
  position: relative;
  background-color: transparent;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://vincentgarreau.com/particles.js/assets/_build/js/lib/particles.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="outer-container">
        <div id="particles-js"></div>
        <table class="table table-dark">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>@fat</td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td>@twitter</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

​

为什么？

因为具有position:absolute的元素将使用最近的定位祖先(CPA)作为引用，其中“最近的定位祖先”指的是具有position值而不是static (默认情况下)的第一个最近的父级。

如果直到<body>的父级没有“定位”，则将使用<body>。

对于我们的例子，这意味着：#particles-js将使用.outer-container作为CPA (注册会计师维度的width: 100%; height: 100%平均百分比)，并且注册会计师将根据其非绝对定位的内容(即<table> (因为所有position:absolute内容都从文档流中删除，因此其父母的行为就像该内容不存在)进行调整)。