时间戳

首页 > 解决方案 > 为什么我的 CSS 底部属性将 div 的顶部边缘与文档底部对齐，而不是底部边缘？

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

问题描述

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

我试过位置：固定，底部：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 从页面底部发送出去，隐藏在页脚下方。帮助！

标签： jqueryhtmlcss

解决方案

具有位置的元素：固定；相对于视口定位

这就是当你给bottom:0你的元素时，它们都堆叠在你的页面底部（视口）相互重叠的原因。

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

如果您希望它们堆叠， 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>

替代解决方案：

将父级添加到两者divs并像这样定位它们：

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

希望能帮助到你！

推荐阅读