Slick Slider，将对象绝对放置在幻灯片上方

Question

我做了一个 JSFiddle 解释我想用光滑的幻灯片做什么：

<div class="slider">
  <div>
     <div class="absolute">
        Blabla
     </div>
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
     <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
</div>

CSS

.absolute {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    background-color: #900;
}

简而言之：第一张幻灯片中的红色框是不可见的，因为它位于隐藏了溢出的幻灯片内部。我需要该框仅成为第一张幻灯片的一部分并随幻灯片移动。

任何人都可以修复 JSFiddle 示例，使其有效，我们将不胜感激。

Answer 1

我发现了一个技巧，你必须在每个幻灯片元素上设置一个 margin-top 或 padding-top 。

.slick-slide{

    padding-top:25px 
    //margin-top:25px also working
}

Answer 2

工作正常。确保红色框应该是绝对位置并且每个滑块都有相对位置。这样你的红色框就只属于那张幻灯片

.slider > div{
    position: relative;
}
.absolute {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    background-color: #900;
}

Answer 3

第一张幻灯片中的红色框将始终保持单独状态，因为它的位置为“绝对”。 但你可以解决这个问题。

• absolute：该元素从正常文档流中删除，并且在页面布局中不会为该元素创建空间。该元素的位置相对于其最近定位的祖先

这就是我们添加到父 div 的原因：

position:relative

现在代码将如下所示：

<div class="slider">
  <div style="position: relative">
     <div class="absolute">
        Blabla
     </div>
     <img ...>
  </div>
  <div>
     <img ...>
  </div>
</div>

如果你愿意，你可以尝试一下父母的位置，看看这是如何运作的......

<div style="position: relative; left: 1">