停止相对定位的 div 与其他 div 重叠

Question

我将三个 div 堆叠在一起（顶部、中间、底部）。在中间的 div 中，我使用改编自 this fiddle by jfriend00 的 Javascript 进行图像淡入淡出。

中间 div 的位置设置为相对，其中的图像都设置为绝对。然而，发生的是中间 div 与底部 div 重叠。

我大部分时间都读到要包含绝对定位的元素，您必须使用我使用过的相对容器，但是，我不明白为什么我的中间 div 没有在顶部和底部 div 之间很好地流动和堆叠？

如果我向容器添加 583 像素的静态高度和 940 像素的宽度，它会正确流动但没有响应。理想情况下，它需要使用百分比宽度。

这是我尝试过的：

.container {position: relative; font-size: 0; width: 100%;}

/*.container {position: relative; font-size: 0; height: 940px; width: 583px;} this stops the box responding, which isn't what I want */

.slide {
border: none; 
opacity: 0; 
position: absolute; 
width: 100%;
top: 0; 
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}

.showMe {opacity: 1;}

.top {display: block;}

.bottom {display: block;}



<div class="top">
        This is some test content. Top.
</div>

<div class="container">
   <img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
   <img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
   <img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
   <img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
   <img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
   <img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
   <img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>

<div class="bottom">
        This is some test content. Bottom.
</div>

这是一个fiddle 来演示问题。

非常感谢您对此提供任何帮助。

Answer 1

这里！只需将其中一张幻灯片相对定位，这样它就可以为其父容器指定高度！

https://jsfiddle.net/4ycxayb2/3/

只需添加这个：

.slide:last-child {
  position: relative;
}

Answer 2

这就是你想要的？

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 7;

function nextImage() {
  var e;
  // remove showMe class from current image
  e = document.getElementById("slideimg" + curImage);
  removeClass(e, "showMe");

  // compute next image
  curImage++;
  if (curImage > numImages - 1) {
    curImage = 0;
  }

  // add showMe class to next image
  e = document.getElementById("slideimg" + curImage);
  addClass(e, "showMe");
}

function addClass(elem, name) {
  var c = elem.className;
  if (c) c += " "; // if not blank, add a space separator
  c += name;
  elem.className = c;
}

function removeClass(elem, name) {
  var c = elem.className;
  elem.className = c.replace(name, "").replace(/\s+/g, " ").replace(/^\s+|\s+$/g, ""); // remove name and extra blanks
}

#container {
  position: relative;
  font-size: 0;
  width: 100%;
}

.slide {
  border: none;
  opacity: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.showMe {
  opacity: 1;
}

.top {
  display: block;
  position: relative;
}

.bottom {
  display: block;
  position: relative;
}

<div class="top">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="bottom">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div id="container">
  <img id="slideimg0" class="slide showMe" src="https://dummyimage.com/940x583/red/fff.jpg">
  <img id="slideimg1" class="slide" src="https://dummyimage.com/940x583/000000/fff.jpg">
  <img id="slideimg2" class="slide" src="https://dummyimage.com/940x583/6b6b24/fff.jpg">
  <img id="slideimg3" class="slide" src="https://dummyimage.com/940x583/fefe03/fff.jpg">
  <img id="slideimg4" class="slide" src="https://dummyimage.com/940x583/094fae/fff.jpg">
  <img id="slideimg5" class="slide" src="https://dummyimage.com/940x583/fa132e/fff.jpg">
  <img id="slideimg6" class="slide" src="https://dummyimage.com/940x583/a90cba/fff.jpg">
</div>