当在另一个div中使用绝对位置时，是否有任何解决方案可以阻止没有预定义高度的元素向上移动？
这就是定义了高度后的效果。
http://jsfiddle.net/77tsq/：DEMO
.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/-无高度
1条答案
按热度按时间zujrkrfu1#
我从你的问题中理解到的是，你希望你的
.test <div>保持在.relative div的底部。但是它不工作，因为
.relative div是.absolute div的父div，* 当父div没有定义的高度属性时，默认情况下它有height: autocss属性。所以它将具有其子div的高度。但是当你在子div上设置position: absolute时，子div独立于父div（不再充当子项），因此您正在覆盖/破坏此默认行为。*因此，当子div有position: absolute时，父div将不再照顾其子div，并且子div将作为独立div绝对定位在所有其他div之上。在你的例子中，子div，即
.absolute div，被放置在另一个div的上面，留下它下面的空间给其他div，这样其他div就可以在它下面占据背景位置。由于父div.relative div是空的，它没有定义的高度属性，它不再接受其子div的高度。绝对div，所以它的高度变成了零。类似地，.clear div也是空的，没有定义height属性，因此height为零。因此，.test div占据了顶部位置。因此，只要你为.absolute div使用position:absolute，或者你没有为.relative div定义height，它就不会工作。所以我们必须找到一个替代的解决方案。所以，如果你想让它工作，你有两个替代解决方案：
***从child .absolute div中删除css属性
position:absolute;top:120px;，并添加css属性float:right; margin-top: 120px;以根据您的需要定位它。**在这里检查结果：https://jsfiddle.net/22namfpn/1/（只要.relative div为空或没有定义height属性，它仍然不可见）或
.relative div上设置自定义高度（height: 400px;或任何合适的高度）（正如您已经在此处尝试的那样：http://jsfiddle.net/77tsq/）（很抱歉，因为这个答案太晚了，但我认为它可能会指导/帮助你和其他人理解为什么你的代码没有按照你想要的那样工作）。