Question

在我的主页上，我试图获得一个图像（徽标）以重叠我的jquery幻灯片。幻灯片放映上方是一个包含搜索栏的div，徽标应位于此div的顶部，并与幻灯片放映重叠。我没有尝试过任何工作。感谢所有帮助，谢谢！

<div class="container">

    <div class="logo"> <img src="img/logo.jpg"/></div>
    <div class="topbanner">
       <form method="get" action="/search" id="search">
        <input name="searchbar" type="text" size="30" placeholder="Search..." />
    </form> 
</div>

<div id="slides">
    <img src="img/header1.jpg">
    <img src="img/header1.jpg">
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function() {
    $('#slides').slidesjs({
        width: 960,
        height: 350,
        play: {
            active: true,
            interval: 4000,
            swap: true
        }
    });
});
</script>

Answer 1

默认情况下，代码中页面下方的元素将与页面上方的元素重叠。要更改此设置，您必须在容器上提供CSS position属性，并在子元素上使用z-index来确定堆叠顺序。例如：

.container {
  position:relative;
}

.logo {
  z-index: 10;
}

#slides {
  z-index: 1;
}

这应该足以至少从正确的重叠顺序开始。

Answer 2

如果我理解正确，那么它应该适用于设置

.logo {
    position:relative; 
    margin-bottom: -XXpx;
    overflow: visible;
    z-index: 10;
}

这样，您的徽标应该从正常位置向下XX像素。

您也可以将#slides包装到＃slides-container中，设置为position：relative 你的.logo位置：绝对内部。

#slides-container {
    position:relative; 
    overflow:visible;
}

.logo {
    position:absolute; 
    top:-XX; 
    right:XX;

}

希望这有帮助。

静止图像重叠jquery图像幻灯片

2 个答案:

静止图像重​​叠jquery图像幻灯片

2 个答案:

静止图像重叠jquery图像幻灯片