Question

我已经建立了一个非常基本的单页网站，它有一个nagivation，一个滑块（3个图像的轮播）和一个页脚。我的问题是，虽然滑块可以正确地将图像逐渐淡入和淡出，但由于它位于绝对位置，我无法从其下方取出页脚。

滑块与所有东西重叠，我认为这是绝对的，因为它是绝对的。

我的问题是，如果将滑块保持绝对定位是更明智的（它允许jQuery使用它的魔法淡入/淡出）并以不同的方式定位我的页脚...或者如果我应该完全重新处理滑块。 / p>

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

保持绝对位置是可以的，但是使页脚的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。

滑块（旋转木马）与其他元素对齐

2 个答案: