Question

因此，我有一个类为flex-container的div，并且我希望将其堆叠在我的其他div之上，该其他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>

Answer 1

相对位置会将其放置在您的内容下方，而不是始终填充页面底部

.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>

Answer 2

通过使用包装器/容器包装flex-container和black-bar以垂直堆叠它们（使用flex）并使用css动态计算flex-container的剩余高度，就可以实现结果。 calc()。

链接到小提琴：https://jsfiddle.net/Baliga/7s8k910f/20/

Answer 3

因为黑条的位置为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>

为什么我的下层div与其他div重叠而不叠放？

3 个答案: