Question

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

这就是定义高度的样子。

.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属性时，默认情况下它具有height: auto css属性。所以它将具有其子div的高度。但是当你在子div上设置position: absolute时，子div将独立于父div（不再作为子级），因此你会超越/打破这种默认行为。所以父母将当孩子有position: absolute时，他不再照顾孩子的div。孩子将被绝对地定位在所有其他div上作为独立的div。

在你的情况下，孩子div .absolute div被放置在另一个div上，而其下方的空间留空了其他div，所以其他div可以取下面的背景位置。由于父.relative div为空且它没有已定义的高度属性，并且它不再占用其子项.absolute div的高度，因此其高度已变为零。类似地，.clear div也是空的，没有定义的高度属性，因此高度为零。因此，.test div占据首位。因此，只要您对position:absolute使用.absolute div，或者您没有为.relative div定义高度，它就无效。所以我们必须为它找到一个替代解决方案。

所以，如果你想让它工作，你有两个备用的解决方案：

从子.absolute div中删除css属性position:absolute;top:120px;并添加css属性float:right; margin-top: 120px;以根据需要定位。在此处检查结果：{{3} }（只要.relative div为空或没有定义的高度属性，height: 400px;仍然不可见。

OR

在父.relative div上设置自定义高度（(write-csv *your-data-rows* :always-quote t)或任何合适的高度）（正如您在此处尝试过的那样：https://jsfiddle.net/22namfpn/1/）

（很抱歉，这个答案为时已晚，但我认为它可以指导/帮助您和其他人了解您的代码无法正常工作的原因。）

位置绝对..反正停止这个元素移动？

1 个答案: