我有一个图片幻灯片,我想在整个幻灯片上覆盖一个小的 div。
我的 Html,SlideDiv 是顶部的 div。
<div id="SlideDiv">
<div class="fadein">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img1.jpg">
</div>
</div>
我的 CSS。
SlideDiv
{
position: absolute;
height:50px;
width: 100px;
background:#696969;
top:400px;
left: 502px;
}
.fadein {
position:relative;
border: 3px solid #838383;
padding: 1px;
width:852px;
height:480px;
left: 500px;
top: 200px;
}
.fadein img { position:absolute; left:500; top:300; width: 852px; height: 480px;}
最佳答案
标记有一个开放的 div
标签,需要更正。
<div id="slide-div"></div>
<div class="fadein">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img1.jpg">
</div>
接下来,必须调整 CSS 选择器以使用 #
符号,这是 Id 选择器所必需的。我还建议将 id 更改为 slide-div
以遵守约定。接下来,您必须在 #slide-div
元素上指定 z-index
属性,以使其显示在 div.fadein
上方。这是完成的 CSS:
#slide-div
{
position: absolute;
height:50px;
width: 100px;
background:#696969;
top:400px;
left: 502px;
z-index: 100;
}
JS fiddle : http://jsfiddle.net/A8uDR/
基本上,要将一个元素叠加在另一个元素之上,叠加层必须是 position:absolute
并且 z-index
高于它所覆盖的元素。您可能需要调整定位属性(顶部/左侧)、高度和宽度,以使其样式符合您的喜好。
关于jquery - 我无法将一个 div 叠加在另一个上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24622085/