【发布时间】：2015-12-04 07:27:06
【问题描述】：
给定：
<body>
<div id="fixed">
Fixed div
</div>
<div id="nonfixed">
<p>Non-fixed div</p>
<p>Non-fixed div</p>
<p>Non-fixed div</p>
</div>
</body>
还有：
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
}
#fixed {
position: static;
width: 100%;
border: 3px solid #f00;
}
#nonfixed {
margin-top: 50px;
border: 3px solid #00f;
}
注意position:static，这给出了预期的结果（fiddle）：
但是，将position:static 更改为fixed，你就会得到这个(fiddle)
即使#fixed div 不在#nonfixed 内，它也占据了#nonfixed 的上边距。这在 Chrome 和 Firefox 中都会发生。奇怪的是，两个浏览器中的开发工具都没有显示有任何边距的#fixed div，所以很明显它的定位就像它被固定在#nonfixed div 中一样。
如果我将 top:0 添加到 #fixed 规则集，则 div 将返回到窗口的顶部，但它不应该出现在顶部（即正常流动的位置，但不影响其他元素）在没有top 规范的情况下？
为了完整性：position:relative 产生与static 相同的结果，absolute 看起来与fixed 相同。
我在规范中找不到任何直接说明为什么绝对定位的元素应该相对于后续兄弟定位的任何内容。事实上，阅读我找到的规范（强调我的）：
10.6.4 Absolutely positioned, non-replaced elements
...
如果 'top'、'height' 和 'bottom' 三个都是自动的，将 'top' 设置为静态位置并应用下面的第三条规则.
...
- 'height' 和 'bottom' 是 'auto' 而 'top' 不是 'auto'，则高度基于 10.6.7 的内容，为 'margin-top' 和 '设置 'auto' 值margin-bottom' 为 0，并求解 'bottom'
这似乎表明#fixed 框确实应该在视口的顶部。
由于 FF 和 Chrome 都做同样的事情，我猜它应该以这种方式工作，但我想知道为什么。谁能根据规范解释这种行为？
【问题讨论】：
标签： html css css-position