绝对定位的 div 不起作用答案

【问题标题】：Absolutely positioned div doesn't work绝对定位的 div 不起作用
【发布时间】：2015-09-29 03:09:24
【问题描述】：

我有一个 css 动画，它使一个 div 进入另一个 div。 DIV 1 位于 DIV 2 之下。如果我将 DIV 2 设置为绝对定位，则页面将破碎。但是如果我不让 DIV 2 绝对定位，那么 DIV 1 就不会在它下面，购买留在 div 的顶部。

您可以现场查看here

这是在没有绝对定位正确内容的情况下的外观。

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

有什么有用的解决方案可以解决这个问题吗？我真的很感激。

提前致谢。

【问题讨论】：

标签： html css

【解决方案1】：

这就是它不起作用的原因，你的父 div 必须有位置才能生效。

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

【讨论】：

【解决方案2】：

要使#content 成为顶层，请将具有更高值的z-index 添加到另一个div。

请注意，如果您不设置 div position:absolute 或 position: relative，z-index 将不起作用

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

【讨论】：

【解决方案3】：

我设法让它工作：

#content {
  position: relative;
}

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

【讨论】：

【解决方案4】：

从那个答案：

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

【讨论】：