单独元素的边缘如何影响固定元素的位置？ [英] How does margin of separate element affect position of fixed element?

问题描述

我有两个单独的 DIV s一个位置：fixed 用于通知栏，我给了容器一些 margin-top ，这也推送了我的通知栏！

I have two separate DIVs one position : fixed for notification bar, and one for main container, when I give the container some margin-top , this also pushes my notification bar!

这里是一个小提琴： http://jsfiddle.net/Zh9k8/2/

，我知道我可以用 top：0

推荐答案

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

Common issue caused by collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

修复是不使用边距，但以另一种方式创建空间。您可以向 .container 中添加顶部填充，并删除边距：

The fix is to not use a margin, but create space another way. You could add top padding to .container and remove the margin:

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

如果元素没有顶部
边框，没有顶部填充，并且子元素没有顶部填充，则流入块元素的顶部边缘与其第一个
流入块级子项的顶部边缘折叠没有清除。

The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

如果元素的边距与其父上边距折叠，
框的顶边框边界被定义为与
父母的。

If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

非常混乱的lingo，但它描述的是发生了什么。

Very confusing lingo, but it describe's exactly what is happening.

这篇关于单独元素的边缘如何影响固定元素的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！