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 cover to div #text。我可以设置margin-top，但我不知道它有多少行，但这是用PHP自动生成的。

Answer 1

它正在按预期工作（你没有说你认为它应该如何工作）。

根据CSS 2.1 specification a margin-top的第10.6.3节，在正常流程中块级非替换元素（例如div）上的值为auto（哪个#text是）overflow: visible（默认值）被视为margin-top: 0。

因此，元素在正常流程中位于0像素（除非在游戏中有其他边距/填充，没有其他）远离前一元素的底部。由于唯一的前一个元素（#fix）是position: fixed，因此不在正常流程中，因此没有这样的元素，因此#text从其容器顶部（#home）放置0像素。这个位置恰好位于#fix。

之下

“margin-top：auto”无效

1 个答案: