Почему мой нижний div перекрывает мой другой div и не сложен? - PullRequest
Новая
       10

Почему мой нижний div перекрывает мой другой div и не сложен?

0 голосов
/ 26 октября 2018

Итак, у меня есть div с классом flex-container, и я хочу, чтобы он располагался поверх моего другого div, который находится ниже класса black-bar, но по какой-то причине div с классом black-bar перекрывает нижнюю часть div с классом flex-container и закрывает нижнюю часть, а не накладывается друг на друга.

Почему это так? 

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>

Ответы [ 3 ]

0 голосов
/ 26 октября 2018

Поскольку черная полоса имеет позицию fixed.Удалите его, и его положение по умолчанию static вернет его в нормальное русло макета. 

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  //position: fixed;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>
0 голосов
/ 26 октября 2018

Вы можете достичь результата, просто обернув flex-container и black-bar оболочкой / контейнером, чтобы сложить их вертикально (используя flex) и динамически рассчитать оставшуюся высоту для flex-container, используя css calc().

Ссылка на скрипку: https://jsfiddle.net/Baliga/7s8k910f/20/

0 голосов
/ 26 октября 2018
Относительная позиция

поместит его ниже вашего контента, не заполняя нижнюю часть страницы все время 

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
  position: relative;
  bottom: 0;
}
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

</div>



<div class="black-bar">

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...