分离元素的边距如何影响固定元素的位置？

Question

分离元素的边距如何影响固定元素的位置？

3

我有两个独立的DIV，一个是position:fixed的通知栏，另一个是主容器。当我为container设置一些margin-top时，这也会使我的通知栏被推出来！这里有个演示：http://jsfiddle.net/Zh9k8/2/。我知道我可以用top:0将它固定在页面顶部，但我想知道为什么会发生这种情况。

- Positivity

嗯，很奇怪，如果你在那里加一个<br>标签，它实际上会像这样分割数据：http://jsfiddle.net/Zh9k8/3/ - BuddhistBeast

这些元素也放在body中，对吗？ - BuddhistBeast

@BuddhistBeast 是的。怎么做呢？你的意思是边距会到父级元素吗？ - Positivity

不，margin-top 应该只影响当前 div 与页面上其他元素的位置关系。奇怪的是，在 div 结束标签后自动换行没有发生，它应该在没有实际插入换行符的情况下完成这个操作。 - BuddhistBeast

2个回答

1

你仍然可以使用边距来创建间距。如果在body上设置最小填充，则可以消除固定块与边距折叠的影响。请参见更新后的fiddle：http://jsfiddle.net/BMCc9/。

body {
    padding: 0.1px;
}

- DRD

看起来有点“hacky”，但在CSS中什么不是呢？非常好用！ - bennett_an

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam · Accepted Answer

由于折叠边距引起的常见问题: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

解决方法是不使用边距，而是通过其他方式创建空间。您可以向.container添加顶部填充并删除边距：

http://jsfiddle.net/Zh9k8/4/

如果一个内联块级元素没有顶部边框、顶部内边距且其第一个内联块级子元素没有间隙，则它的顶部外边距会与其第一个内联块级子元素的顶部外边距折叠。

如果元素的外边距与其父元素的顶部外边距折叠，则该盒子的顶部边框边缘被定义为与父元素相同。

这些术语很令人困惑，但它确切地描述了正在发生的事情。