正如你在下面的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的方式来做到这一点。
虽然拉伸到具有position: absolute的元素是不可能的，但通常有一些解决方案可以避免绝对定位，同时获得相同的效果。看看这个小提琴，解决了你的特定情况下的问题http://jsfiddle.net/gS9q7/
诀窍是通过浮动两个元素来反转元素顺序，第一个元素右移，第二个元素左移，所以第二个元素先出现。
.child1 {
width: calc(100% - 160px);
float: right;
}
.child2 {
width: 145px;
float: left;
}
最后，向父类添加一个clearfix，就完成了(完整的解决方案参见fiddle)。
通常，只要具有绝对位置的元素位于父元素的顶部，就很有可能通过浮动元素来找到解决方法。
这个问题是在2012年flexbox出现之前提出的。使用现代CSS解决这个问题的正确方法是使用媒体查询和移动设备的伸缩列反转。不需要绝对定位。
https://jsfiddle.net/tnhsaesop/vjftq198/3/
HTML:
<div class="parent">
<div style="background-color:lightgrey;">
<p>
I stay on top on desktop and I'm on bottom on mobile
</p>
</div>
<div style="background-color:grey;">
<p>
I stay on bottom on desktop and I'm on top on mobile
</p>
</div>
</div>
CSS:
.parent {
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.parent {
flex-direction: column-reverse;
}
}
