Question

我正在尝试使图像幻灯片放到页脚的顶部，而滑块的底部边缘贴在页脚的顶部边缘。但是，当我使用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从底部的页面发送到了页脚下方。救命！

Answer 1

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

这就是为元素赋予bottom:0的原因，它们都堆叠在页面（视口）的底部，彼此重叠。

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

替代解决方案：

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

希望有帮助！

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

1 个答案: