停止相对定位 Div 与其他 Div 重叠

Question

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

中间div的position设置为relative，里面的图片都设置为absolute。然而，正在发生的是中间 div 与底部 div.

重叠

我主要读到要包含绝对定位的元素，您必须使用相对容器，我已经使用过，但是，我不明白为什么我的中间 div 不能很好地流动和堆叠顶部和底部 divs?

如果我向容器添加 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

这就是你想要的？

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>

Answer 2

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

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

只需添加：

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

停止相对定位 Div 与其他 Div 重叠

Stop Relative Positioned Div Overlapping Other Divs

html

css

positioning