html - 需要一个与图像 slider 重叠的标题 Logo

Question

我是 html 新手。我正在制作一个带有重叠在图像 slider 上的 Logo 的标题。这是我尝试使用此处方法的方式: How would you make two <div>s overlap?

但是，我仍然无法让 Logo 重叠在 slider 上。

这是它现在的样子的链接: 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
} 

Answer 1

您的 z-index 太低了。您的幻灯片已使用 z-index。

尝试:

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