Мой контейнерный раздел выходит за пределы фона Particle.js - PullRequest
Новая
       16

Мой контейнерный раздел выходит за пределы фона Particle.js

1 голос
/ 19 апреля 2019

Я сделал фон для частиц.js и на этом я создал контейнер. В этом контейнере у меня есть две таблицы с некоторыми данными, и когда я уменьшаю размер экрана, сам контейнер выходит за пределы фона component.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;
}

Я хочу, чтобы контейнер находился внутри фона частицы.js, но он выходит за пределы фона. Изображение проблемы, у меня Контейнер выходит за пределы фона

1 Ответ

1 голос
/ 20 апреля 2019

Не размещайте содержимое внутри #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 будет использовать ближайшую позициюancestor (CPA) в качестве ссылки, где «ближайший позиционированный предок» означает первого ближайшего родителя со значением position, отличным от static (по умолчанию).
Если нет родителя до <body> is "positioned" , будет использоваться <body>.

Для нашего примера это означает: #particles-js будет использовать .outer-container в качестве CPA (width: 100%; height: 100% средний процент отРазмеры CPA), а размер CPA будет оцениваться по его неабсолютному позиционированному контенту, который является <table> (поскольку весь контент position:absolute извлекается из потока документов, поэтому его родители ведут себя так, как будто этого контента не существует).

...