这是原来的部门:
应用jquery循环插件后,图像会从底部边框中移出:
任何想法为什么?
以下是该部门的CSS:
#hero {
float: right;
border-top: 1px solid #FFF;
width: 725px;
height: 370px;
background: #666;
}
#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
}
答案 0 :(得分:3)
位置从相对位置变为绝对位置(通过循环插件),这导致z-index变化,如@Orbling所说。如果您希望边框位于旋转器中的图像顶部,则绝对或相对地定位它们并为它们提供高于容器的z-index。
修复:明确定位较低的波浪“边框”元素(position:relative; or position:absolute;)
*,并给它一个高于旋转元素的z-index。
*如果元素未明确定位,则为元素提供比旋转器更高的z-index 不起作用。见http://www.webdevout.net/test?0_
答案 1 :(得分:0)
循环插件使用z-index,这可能是您的问题的根源。从循环插件代码:
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
我会玩“wave”的z-index,看看是否有帮助。
#wave {
width: 970px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background: url(../img/wave.png) no-repeat bottom left;
z-index: 99;
}