Question

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

但是，我仍然无法将标识重叠在滑块上。

以下是现在看起来的链接： 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;
}

Answer 2

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

Answer 3

由于您的徽标的z-index为2，您只需要重置#content div的z-index

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

Answer 4

刚刚在chrome，FF和IE中试过并测试过这个似乎现在正常工作

z-index: 90;
`

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

4 个答案: