绝对定位的div不起作用

Question

我有一个css动画，它让div在另一个div下运行。 DIV 1在DIV 2下。如果我使DIV 2绝对定位，页面将分段。但是如果我没有让DIV 2绝对定位，那么DIV 1就不会在它之下，购买留在div的顶部。

您可以实时查看here

如果没有正确定位正确的内容，这就是它的外观。

如果将鼠标悬停在地图上，您将看到过渡。

任何有用的解决方案摆脱这个？我真的很感激。

提前致谢。

Answer 1

这就是为什么它不起作用，你的父母div必须有位置才能生效。

.div1, .div2{
position:relative;
}
.div3{
position:absolute;
}

看看这里：https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

使Div 2成为position: relative，以便它保持在流程中。见How to make div's percentage width relative to parent div and not viewport

从那个答案：

  

在节点上指定position:relative;或position:absolute;意味着它将用作其中绝对定位元素的参考http://jsfiddle.net/E5eEk/1/

Answer 3

我设法让它发挥作用：

#content {
  position: relative;
}

.info {
z-index: 0;
  position: relative;
}

Answer 4

要使#content成为顶层，请将z-index与其他div一起添加更高的值。

请注意，z-index如果您没有设置div position:absolute或position: relative

，则无法正常工作

#content {
  position: relative;
  z-index: 3;
}