Div位置参数中断滑块

div position argument breaks slider

本文关键字:中断 参数 位置 Div      更新时间:2023-09-26

我正试图在我的网站内集成一个简单的滑块,并在jsfiddle上找到这个例子

我确实想把滑块"相对"在我的网站,但如果我改变css为position: relative;滑块不再正常工作了,因为它现在显示一个一个的褪色图像,像这样

为什么会发生这种情况,我如何在我的网站中定位滑块div"相对"?我尝试用另一个div-layer来包装它,但是没有成功。

按您说的试试包装器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;
}

演示

要在网站内浮动,在#wrap上添加height

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

以及接下来

您不需要包装器。您将position: relative设置在错误的元素上。将其设置在#banner_area上,而不是#banner_area img。演示