正如你在下面的CSS中看到的，我想让child2将自己定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，其中child2应该在底部，因为它包含了我想在移动设备上的内容下面的导航。-为什么不是2本杰作?这是在整个HTML中唯一被重新定位的2个div，所以2个母版对于这个微小的改变是多余的。
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
Child2具有动态高度，因为不同的子站点可以有或多或少的导航项。
我知道绝对定位的元素被从流中移除，因此被其他元素忽略。
我试着设置溢出:隐藏;在父div上，但这没有帮助，clearfix也没有。
我最后的手段将是JavaScript来相应地重新定位两个div，但现在我将尝试看看是否存在一种非JavaScript的方式来做到这一点。
这和@ChrisC的建议非常相似。它不是使用绝对定位元素，而是使用相对定位元素。也许对你有用
<div class="container">
<div class="my-child"></div>
</div>
你的css是这样的:
.container{
background-color: red;
position: relative;
border: 1px solid black;
width: 100%;
}
.my-child{
position: relative;
top: 0;
left: 100%;
height: 100px;
width: 100px;
margin-left: -100px;
background-color: blue;
}
https://jsfiddle.net/royriojas/dndjwa6t/
“你要么使用固定高度，要么就需要让JS参与进来。”
下面是JS的例子:
---------- jQuery JS示例--------------------
function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();
$(containerSelector).children().each(function (i){
if (maxX < parseInt($(this).css('left')) + $(this).width()){
maxX = parseInt($(this).css('left')) + $(this).width();
}
if (maxY < parseInt($(this).css('top')) + $(this).height()){
maxY = parseInt($(this).css('top')) + $(this).height();
}
});
return {
'width': maxX,
'height': maxY
}
}
var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
$("#SpecBody").width(specBodySize.width);
$("#SpecBody").height(specBodySize.height);
