Question

我有三个div叠在一起（顶部，中部，底部）。在中间div中，我使用从this fiddle by jfriend00改编的Javascript进行图像交叉淡化。

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

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

如果我将静态高度583px和宽度940px添加到容器中，它会正确流动但不响应。理想情况下，它需要以百分比宽度工作。

以下是我的尝试：

import itertools

cities = [18897109, 12828837, 9661105, 6371773, 5965343, 5926800, 5582170, 5564635, 5268860, 4552402, 4335391, 4296250, 4224851, 4192887, 3439809, 3279933, 3095213, 2812896, 2783243, 2710489, 2543482, 2356285, 2226009, 2149127, 2142508, 2134411]
target = 101000000 
ps = (set(itertools.combinations(cities,i)) for i in range(len(cities)))
for s in ps:
    for x in s:
        if sum(x) == target:
            print ('target reached:', x)

这是展示问题的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>

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

2 个答案: