html怎么设置顶部布局,html – CSS位置：固定没有顶部给出意想不到的布局？

鉴于：

Fixed div

Non-fixed div

Non-fixed div

Non-fixed div

和：

* { 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)：

但是,改变位置：静态到固定,你得到这个(fiddle)

即使#fixed div不在#nonfixed内,它也占据了#nonfixed的上边距.这在Chrome和Firefox中都会发生.奇怪的是,两个浏览器中的开发工具都没有显示带有任何边距的#fixed div,所以很明显它被定位为好像它被固定在#nonfixed div中.

如果我在#fixed规则集中添加top：0,则div会返回到窗口的顶部,但是如果没有,则不应该出现在顶部(即正常流程中的位置,但不会影响其他元素)最高规格？

为了完整性：position：relative产生与static相同的结果,绝对看起来与fixed相同.

我在规范中找不到任何直接解决为什么绝对定位元素应该相对于后续兄弟定位的内容.事实上,阅读我发现的规范(强调我的)：

07004

…

If all three of ‘top’, ‘height’, and ‘bottom’ are auto, set ‘top’ to the static position and apply rule number three below.

…

‘height’ and ‘bottom’ are ‘auto’ and ‘top’ is not ‘auto’, then the height is based on the content per 10.6.7, set ‘auto’ values for ‘margin-top’ and ‘margin-bottom’ to 0, and solve for ‘bottom’

这似乎表明#fixed框应该确实位于视口的顶部.

由于FF和Chrome都做同样的事情,我猜它应该以这种方式工作,但我想知道为什么.任何人都可以根据规范解释这种行为吗？