jquery - 为什么我的 CSS Bottom 属性将 div 的上边缘而不是下边缘与文档的底部对齐？

Question

我正在尝试让图像幻灯片显示在页脚的正上方， slider 的底部边缘紧贴页脚的顶部边缘。但是当我使用 position: fixed, bottom: 0 属性时，它看起来像是将顶部边缘与页面底部对齐。为什么会这样？

我试过 Position: fixed, bottom: 0;并将幻灯片 div 向下发送到页面底部(div 实际上消失了，因为它似乎粘在顶部边缘而不是底部边缘)。

.slideshow {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding-bottom: 85px;
}

.footer {
  position: fixed;
  bottom: 0;
  background: #0d9196;
  width: 100%;
  height: 80px;
}

我希望这两个 div 可以堆叠，但它实际上只是将整个幻灯片 div 从页面底部发送出去，隐藏在页脚下方。帮助!

Answer 1

An element with position: fixed; is positioned relative to the viewport

这就是当您将 bottom:0 赋给您的元素时，它们都堆叠在页面底部(视口(viewport))彼此重叠的原因。

请参阅 https://www.w3schools.com/css/css_positioning.asp 上的 position:fixed

如果你想让它们堆叠起来，申请bottom: 80px(height of your footer) 到你的 .slideshow

.slideshow {
  position: fixed;
  bottom: 80px;
  width: 100%;
  padding-bottom: 85px;
  background: #ff0000;
}

.footer {
  position: fixed;
  bottom: 0;
  background: #0d9196;
  width: 100%;
  height: 80px;
}

<div class="slideshow"></div>
<div class="footer"></div>

备选方案:

为两个 div 添加一个父级并像这样定位它们:

.slideshow {
  height: 50px;
  background: red;
}

.footer {
  height: 50px;
  background: green;
}

.parent {
  position: fixed;
  width: 100%;
  bottom: 0;
}

<div class="parent">
  <div class="slideshow"></div>
  <div class="footer"></div>
</div>

希望对您有所帮助!