CSS位置:固定不带顶部会产生意想不到的布局? [英] CSS position:fixed without top gives unexpected layout?
问题描述
给出:
< body>< div id ="fixed">固定div</div>< div id ="nonfixed">< p>非固定div< p< p>非固定div< p< p>非固定div< p</div></body> 并且:
* {box-sizing:border-box;}身体 {边距:0;填充:0;}#固定的 {位置:静态；宽度:100％;边框:3px实线#f00;}#nonfixed {边距顶部:50像素;边框:3px实线#00f;} 请注意， position:static ，这给出了预期的结果(
但是，将 position:static 更改为 fixed ，您会得到以下提示(
即使 #fixed div不在 #nonfixed 之内，它也占据了 #nonfixed 的顶部.Chrome和Firefox都会发生这种情况.奇怪的是，两个浏览器中的开发工具都没有显示 #fixed div有任何边距，因此很明显，它的定位就像是固定在 #nonfixed 内的一样.div .
如果我将 top:0 添加到 #fixed 规则集中，则div返回窗口的顶部，但不应显示在顶部(即
top 规范的情况下，它在正常流程中的位置如何，但又不影响其他元素?出于完整性考虑: position:relative 产生与 static 相同的结果，而 absolute 看起来与 fixed 相同
我在规范中找不到任何可以直接解决为什么绝对定位元素相对于后续同级元素定位的问题.实际上，请阅读我发现的规范(重点是我的):
...
如果"top"，"height"和"bottom"中的三个均为自动，请 将"top"设置为静态位置 并在下面应用规则编号3
...
- "height"和"bottom"为"auto"，"top"不是"auto"，则高度基于10.6.7中的内容，为"margin-top"和"margin-top"设置"auto"值margin-bottom'设为0，并求解'bottom'
这似乎表明 #fixed 框确实应该在视口的顶部.
由于FF和Chrome都做同样的事情，所以我猜它应该以这种方式工作，但是我想知道为什么.谁能根据规格说明这种行为?
您会注意到，固定" div实际上位于 body 的顶部，其位置和大小匹配那些非固定"部门.
这肯定是由于 body 和 div#nonfixed 崩溃的顶边距.请参阅 http://www.w3.org/TR/CSS21/box.html#collapsing-margins
8.3.1利润下降
在CSS中，两个或多个框的相邻边距(可能是可能不是兄弟姐妹)可以合并形成一个单一的边距.保证金据说以这种方式组合起来会崩溃，并且最终组合保证金被称为合拢保证金.
(...)
当且仅当:
- 都属于参与同一流程的流入块级框块格式化上下文
- 没有线框，没有间隙，没有填充和没有边框将它们分开(请注意，某些零高度线框(请参见为此，将忽略9.4.2).
- 都属于垂直相邻的框边，即形成以下对之一:
- 盒子的上边距和它的第一个流入量的上边距
- (...)
top 是相对于包含块的，显然不是 body 而是 html (根元素).
Given:
<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>
And:
* { 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;
}
Note that position:static, this gives the expected result (fiddle):
However, change position:static to fixed, and you get this (fiddle)
Even though the #fixed div is not inside #nonfixed, it has taken on the top margin of #nonfixed. This happens in both Chrome and Firefox. Curiously, the dev tools in both browsers do not show the #fixed div having any margins, so clearly it's being positioned as if it was fixed inside the #nonfixed div.
If I add top:0 to the #fixed ruleset the div goes back to the top of the window, but shouldn't this appear at the top (i.e. where it would in normal flow, but without affecting other elements) in the absence of a top specification?
For completeness: position:relative produces the same result as static and absolute looks the same as fixed.
I cannot find anything in the spec that directly addresses why an absolutely positioned element should be positioned relative to a subsequent sibling. In fact, reading the spec I find (emphasis mine):
10.6.4 Absolutely positioned, non-replaced elements
...
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'
This seems to indicate the #fixed box should indeed be at the top of the viewport.
Since both FF and Chrome do the same thing I'm guessing it's supposed to work this way, but I'd like to know why. Can anyone explain this behavior in terms of the spec?
You'll notice that the "fixed" div is actually at the top of the body, the position and size of which match those of the "nonfixed" div.
This is most certainly due to the top margins of the body and div#nonfixed collapsing. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
(...)
Two margins are adjoining if and only if:
- both belong to in-flow block-level boxes that participate in the same block formatting context
- no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are ignored for this purpose.)
- both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
- top margin of a box and top margin of its first in-flow
- (...)
The topis relative to the containing block, which is apparently not bodybut html (the root element).
这篇关于CSS位置:固定不带顶部会产生意想不到的布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
