使用 CSS 创建固定的、内容重叠的页脚

Question

我是 CSS 编码的新手，希望有人能帮助我。当您在移动版页面上向下滚动时，我希望我的图片显示在页脚后面，我该怎么做？ This 是现在的样子。

这是我的页脚的 CSS 代码：

.Footer{

width:100%;

position:fixed;

top:auto;

bottom:0px;

background-color:rgba(242,231,213,2); }

谢谢。

Answer 1

只需添加一个高 z-index 值即可使页脚始终位于所有内容的顶部：

.Footer {
  width: 100%;
  position: fixed;
  top: auto;
  bottom: 0px;
  z-index: 999;
  background-color: rgba(242, 231, 213, 2);
}

如您在此屏幕截图中所见：

您的幻灯片有一个很大的 z-index 值，使它们超过了页脚。所以footer的z-index要大一些

Answer 2

将 z-index: 0 !important; 添加到您的 .sqs-gallery-design-stacked-slide class 中，因为它设置 z-index 来自轮播的值增加了一个更大的值。所以在下面添加 css 将解决问题。

.sqs-gallery-design-stacked-slide{
  z-index: 0 !important;
}

Using CSS To Create a Fixed, Content-Overlapping Footer