问奇怪的容器div行为

EN

尝试将其他元素添加到这个HTML中，并享受下面的恐怖:D

实际上，在您的代码中有很多事情我是不会做的。首先，当一个元素使用position: absolute或position: fixed时，它的布局被其他元素“忽略”，换句话说，不能“推”任何元素，这就是为什么容器的高度为0。就好像他们是空想的(我知道，这是最好的解释)。

您应该查看这篇关于定位的文章-- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

事实上，它们就在您期望的位置上，实际上HTML中没有其他元素，absolute元素相对于body定位，fixed元素也是如此(但是position: fixed元素总是这样做的)。查看当我向父div - http://jsfiddle.net/7fsXp/13/添加其他内容时会发生什么情况。

因此，长话短说-你不应该形成你的布局绝对或固定的元素，如果你可以做到没有他们。

position: fixed和position: absolute将元素从流中提取出来，因此在所有子div上使用这些位置都将完全折叠父div。

如果您的内容在折叠的div下面，它将在该内容(如这 )下上下流动。

您不需要绝对地定位main_content div，但是您需要更改一些东西以使侧边栏和main_content对齐。

演示

由于侧栏是固定的，所以它使用的是文档，而不是容器div作为top的引用，而main_content则使用主体(除非将position: relative添加到容器中)。摆脱身体的默认填充/边距将修复微小的对齐差异。

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

这取决于您愿意做什么，但是由于div的默认div是position: static;，所以更改position: relative;将避免父div的崩溃。