Question

我正在尝试在我的网站中集成一个简单的滑块，并在jsfiddle上找到this example

我确实想将滑块“相对”放在我的网站中，但是如果我将css更改为 position: relative;滑块不再正常工作，因为它现在会将淡化图像显示在彼此上方like this

为什么会发生这种情况？如何在我的网站中定位slider-div“relative”？我尝试用另一个div-layer包装它但没有成功。

Answer 1

如您所说，尝试使用包装div。

您应该将滑块放在另一个div内，然后将此包装div置于相对位置。

HTML：

<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
    <img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
    <img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
    <img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
    <img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>

CSS：

#wrap{
    position:relative;
    top:100px;
    left:100px;
}

DEMO

<强>更新

要在网站中浮动，请在height

中添加#wrap

#wrap{
    position:relative;
    top:0px;
    left:100px;
    height:250px;
}

DEMO2

Answer 2

你不需要包装纸。您在错误的元素上设置position: relative。将其设置为#banner_area，而不是#banner_area img。 DEMO

div位置参数打破滑块

2 个答案: