html - 如何防止元素因绝对定位而移动？

Question

当在另一个 div 中使用绝对位置时，是否有任何解决方案可以阻止没有预定义高度的元素向上移动？

这是定义了高度后的样子。

http://jsfiddle.net/77tsq/ : 演示

.relative {
  position: relative;
  width: 600px;
  height: 400px;
  background:green;
}

.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 400px;
  height: 200px;
  background:blue;

}   

.test { position:relative;
  width: 600px;
height:200px;
float:left;
 clear:both;
 background:pink;
}

.clear { clear:both;}

HTML

<div class="relative">
<div class="absolute">

</div>
</div>
<div class="clear"></div>

<div class="test">
</div>

但是当删除高度时它看起来像这样:

http://jsfiddle.net/77tsq/1/ - 没有高度

Answer 1

我从你的问题中了解到你想要你的 .test <div>留在.relative div的底部.

但它不起作用，因为 .relative div是 .absolute div 的父 div 当父 div 没有定义高度属性时，它有 height: auto默认情况下的 css 属性。因此它将具有其子 div 的高度。但是当你设置 position: absolute在子 div 上，子 div 独立于父 div(不再充当子 div)，因此您将覆盖/破坏此默认行为。 因此，父 div 将不再照顾其子 div child 有position: absolute并且 child 将作为独立的 div 绝对定位在所有其他 div 之上。

在您的情况下，子 div 即 .absolute div放置在其他 div 之上，将其下方的空间留给其他 div，以便其他 div 可以占据其下方的背景位置。作为家长.relative div是空的，它没有定义的高度属性，它不再采用其子项的高度。绝对 div 因此它的高度已变为零。同样.clear div也是空的，没有定义的高度属性，因此高度为零。因此 .test div 排在首位。所以只要你用position:absolute就不行了对于 .absolute div或者您没有为 .relative div 定义高度.因此，我们必须为其寻找替代解决方案。

所以，如果你想让它工作，你有两个替代解决方案:

• 删除 css 属性 position:absolute;top:120px;来自子 .absolute div 并添加 css 属性 float:right; margin-top: 120px;将其放置在您想要的位置。 在此处查看结果:https://jsfiddle.net/22namfpn/1/ (.relative div 仍然不可见，只要它为空或没有定义高度属性)

或

• 在父元素 height: 400px; 上设置自定义高度( .relative div 或任何合适的高度) (正如您已经在此处尝试过的那样:http://jsfiddle.net/77tsq/)

(很抱歉，这个答案为时已晚，但我认为它可能会指导/帮助您和其他人理解为什么您的代码没有按您的期望工作)。