Question

我有一个图片幻灯片，我试图在整个幻灯片上叠加一个小div。

我的HID与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以遵守惯例。接下来，您必须在z-index元素上指定#slide-div属性，使其显示在div.fadein之上。这是完成的CSS：

#slide-div 
{
   position: absolute;
   height:50px;
   width: 100px;
   background:#696969;
   top:400px;
   left: 502px;
   z-index: 100;
}

JS小提琴： http://jsfiddle.net/A8uDR/

基本上，要将一个元素叠加在另一个元素之上，叠加层必须为position:absolute并且比叠加的元素高z-index。您可能需要调整定位属性（顶部/左侧），高度和宽度，以使其更符合您的喜好。

Answer 2

要显示为叠加层的任何元素，请确保它具有绝对或相对指定的位置，并为其指定一个z-index值，该值大于您尝试叠加的div。

它很懒，但是你找不到很多覆盖解决方案：

.overlay {
  position: relative; /* or absolute - necessary for z-index to have an effect.*/
  z-index: 99999999;
}

如果这还没有解决，请查看您的叠加div是否实际可见/显示＆是否有一些ajax动态地动态更改某些属性，这会扼杀叠加层（这也是我不时使用愚蠢的z-index的原因 - 大多数人都不够愚蠢到达那么高的位置:)）

我无法将一个div叠加到另一个div上

2 个答案: