与其他元素对齐的滑块（轮播）

Question

我已经建立了一个非常基本的单页网站，它有一个导航、一个滑块（带有 3 个图像的轮播）和一个页脚。我的问题是，虽然滑块正确地淡入和淡出图像，但因为它的位置是绝对的，我无法从它下面取出页脚。

滑块与所有内容重叠，我认为这是有道理的，因为它是绝对的。

我的问题是保持滑块绝对定位是否更明智（它允许 jQuery 工作它的神奇淡入/淡出）并以不同的方式定位我的页脚......或者我是否应该完全重新工作滑块。

HTML：

<div id="carousel">
  <img class="slideshow" src="img/slide2.jpg">
  <img class="slideshow" src="img/slide3.jpg">
  <img class="slideshow" src="img/slide1.jpg">
</div>

萨斯：

#carousel {
  img {
    background-position: center;
    background-repeat: none;
    background-size: cover;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

.slideshow {
  display: hidden;
  position: absolute;
}

这是我在 JSfiddle 上的页面示例（以及运行滑块的 JS）：https://jsfiddle.net/josectello/7n8c5bq8/

非常感谢您。

Answer 1

保持绝对位置是可以的，但是让footer的z-index高于imgs，这样它就会可见。

希望我确实正确理解了您的问题。

Answer 2

这很容易解决。

添加这个：

// GLOBAL
body {
  background-color: black;
  margin: 0 0 200px;
}

html {
    position: relative;
    min-height: 100%;
}

将您的页脚更改为绝对定位并给它一个高度，如下所示：

footer {
  @include module-style;
  position: absolute;
    left: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
}

这会在页面底部添加一个粘性页脚并避免与滑块发生冲突。

请参阅此CodePen 以获得有效的解决方案。