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

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

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

Answer 2

我为此发现了一个技巧，您必须在每个幻灯片元素上设置边距顶部或填充顶部。

.slick-slide{

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

滑动滑块，滑块上方的位置对象绝对

2 个答案: