2017-05-25 131 views
0

我做了一个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示例,所以这个工程,这将不胜感激。

回答

0

工作正常。确保红色盒子应该位置绝对&和每个滑块有相对位置。让你的红色框是属于该幻灯片只有

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

嗨:)感谢您的答复 - 我说的相对位置的CSS在这个小提琴:[链接](https://jsfiddle.net/6v9q796n /),但红色框仍然消失在滑块的顶部下方。 你可以请mod小提琴让它工作吗? – John