jquery - 我无法将一个 div 叠加在另一个上

Question

我有一个图片幻灯片，我想在整个幻灯片上覆盖一个小的 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;}

Answer 1

标记有一个开放的 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 高于它所覆盖的元素。您可能需要调整定位属性(顶部/左侧)、高度和宽度，以使其样式符合您的喜好。