Question

假设：

   <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

...

如果全部三个＆＃39; top＆＃39;，＆＃39; height＆＃39;和＆＃39; bottom＆＃39;是自动， 设置＆＃39; top＆＃39;到静态位置 并在下面应用第三条规则。

...


＆＃39;高度＆＃39;和＆＃39;底部＆＃39;是＆＃39; auto＆＃39;和＆＃39; top＆＃39;不是＆＃39; auto＆＃39;，那么高度是基于每10.6.7的内容，设置＆＃39; auto＆＃39; ＆＃39; margin-top＆＃39;的值和＆＃39; margin-bottom＆＃39;为0，并解决＆＃39; bottom＆＃39;

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

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

Answer 1

您会注意到“固定”div实际上位于body的顶部，其位置和大小与“非固定”div的位置和大小相匹配。

这肯定是由于body和div#nonfixed崩溃的最高边距。见http://www.w3.org/TR/CSS21/box.html#collapsing-margins

8.3.1折叠边距

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说会崩溃，并由此产生组合   保证金称为折现保证金。

（...）

当且仅当：
时，两个边距相邻

都属于参与其中的流入块级框   阻止格式化上下文

没有行框，没有间隙，没有填充和   没有边框将它们分开（请注意某些零高度线框（请参阅   9.4.2）为此目的被忽略。）

都属于垂直相邻的盒子边缘，即形成以下对中的一个：

框的上边距及其首次流入的上边距

（...）

top相对于包含块，显然不是body而是html（根元素）。

CSS位置：固定没有顶部会给出意想不到的布局吗？

1 个答案: