“margin top:auto”不起作用

Question

<div id="home">
    <div id="fix">aaa<br />fff</div>
    <div id="text">bvvvbbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb  </div>
</div>

#fix {
    width: 500px;
    position: fixed;
    background-color: blue;
    top:0;
    left:0;
}
#text {
    background-color: green;
    margin-top:auto;  
    width: 500px;
    height: 700px;
}

为什么margin-top在本例中不起作用？

(在div#fix中，数据是用PHP自动生成的。)

演示：http://jsfiddle.net/uK2RK/9/

编辑:现在div#fix封面到div#text。我可以设置边距顶部，但我不知道有多少行，但这是用PHP自动生成的。

Answer 1

它的工作方式就像它应该的那样(你没有说你认为它应该如何工作)。

根据CSS 2.1 specification的第10.6.3节，在使用overflow: visible (默认值)的普通流(# margin-top是#text )中的块级未替换元素(比如div)上，如果文本的值为auto，则将其视为margin-top: 0。

因此，该元素的位置离正常流中前一个元素的底部0个像素(除非有其他页边距/填充，但实际上没有)。由于之前唯一的元素(# position: fixed )是position: fixed，因此不在正常的流程中，所以没有这样的元素，所以#text被放置在距离其容器(#home)顶部0像素的地方。这个位置恰好在#fix下面。