需要与图像滑块重叠的标题徽标

Question

我是html的新手。我正在制作一个标题，其中徽标在图像滑块上重叠。这是我在这里使用该方法尝试的方式：您将如何使两个

重叠？

但是，我仍然无法使滑块上的徽标重叠。

这是它现在看起来的链接：http://homebeta.site90.com/

.HTML

div id="logo"><img src="engine1/logo.png" /></div>
<div id="content"> <div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>
<li><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_1"/></li>
</ul></div>
<span class="wsl"><a href="http://wowslider.com">Gallery Javascript</a> by WOWSlider.com    v5.0</span>
<div class="ws_shadow"></div>
</div></div></div>

.CSS

#wowslider-container1 { 
zoom: 1; 
position: relative; 
max-width:940px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
font-size: 10px;
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%; 
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#html, body {
width: 940px;
margin: auto;
}
#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 2;
}
#content {
margin-top: 100px; // provide buffer for logo
} 

z 索引

太低。 您的幻灯片已使用 Z 索引。

尝试：

#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 5000;
}

可能是

滑块脚本的问题：它可以为内部图像添加自己的z-index。向#logo添加z-index: 91;（或更多）必须解决问题。

由于您的徽标的 z 索引为 2，您只需重置 #contentdiv 的 z 索引

#content {
margin-top: 100px;
position: relative; /* required */
z-index: 1; /* lower than z-index of logo */
}

刚刚在 chrome 中尝试并测试了这一点，FF 和 IE 现在似乎可以工作

z-index: 90;
`