我的容器Div在Particle.js背景之外

问题描述 投票：1回答：1

我制作了一个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>[email protected]</td>
              </tr>
              <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>[email protected]</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背景中，但它超出了背景范围.Image Of The Problem, I am havingContainer Going Outside Of The Background

javascript html5 css3 particles.js
1个回答
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%平均CPA维度的百分比），并且CPA将根据其非绝对定位内容（<table>）来定义（因为所有position:absolute内容都取自文档因此，它的父母的行为就像内容不存在一样）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.