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

Question

我有三个重叠的div（顶部、中间、底部）。在中间的div中，我使用了从jfriend00的这个fiddle改编来的Javascript实现图片交替淡入淡出。

中间的div的位置设置为relative，其中的图片都被设置为absolute。然而，中间div与底部div重叠了。

我大多数时候读到说，要包含绝对定位的元素，必须使用相对容器，我已经使用了相对容器，但我不明白为什么我的中间div不能很好地在顶部和底部div之间流动和堆叠？

如果我向容器添加静态高度583px和宽度940px，它会正确地流动，但无法响应。理想情况下，它需要与百分比宽度一起工作。

以下是我尝试过的内容：

.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。

非常感谢您的帮助。

- Hexana

---

给你的中间元素添加静态高度，它将开始占据空间并将底部块推下去。中间块的高度为0，因为其中的绝对定位元素不占据任何空间。（绝对定位元素不占据空间或推动周围的元素） - Slava Eremenko

如果我添加一个静态高度为583，它会清除底部的div，但会在下方创建一个大的间隙。 - Hexana

Answer 1

在这里！只需将其中一个幻灯片相对定位，以便它可以为其父容器提供高度！只需添加以下内容：https://jsfiddle.net/4ycxayb2/3/。

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

- Slava Eremenko

---

哇，太棒了。就是这么简单。非常出色，先生。问题解决了！！！ - Hexana

是的，问题是中间元素没有占用任何空间。它没有高度，因为它的所有内容都是绝对定位的。很好的解决方案！ - Michael Benjamin

是的。这个的唯一问题就是幻灯片必须是相同的大小 :) 否则需要一点 JavaScript。 - Slava Eremenko

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>

- l.g.karolos

---

谢谢，我明白了。通过将中间的div移到底部，问题得到了解决，但是我还会有其他的div在下面。 - Hexana