无论如何,让我想到margin-top和top之间的区别是什么,这就是我发现这个问题的方法：CSS: Top vs Margin-top.
我已经知道margin-top做了什么.但我从来没有推断出这个想法“嗯,这个元素不在DOM流程中,所以究竟是什么才能让它远离？”
从我问的问题中我知道,当应用于具有固定位置的元素时,margin-top会以非常意外的方式运行.至少在Chrome中这可能导致一些疯狂的规则(如margin-top：-273％;).
所以我的问题是：浏览器如何将边距规则应用于不在DOM流中的元素(即位置值为固定或绝对的元素.那么它们的应用和渲染方式如何导致规则,如上所述,实际上在视口内渲染元素？
解决方法
另一方面,保证金是盒子模型本身的一部分.在框顶部添加边距会增加框上方的空白区域.
考虑以下位置图层：固定框：
top:10px
margin-top:10px
------------border-top:1px------------
padding-top:10px
content
所有边距,边框和填充都是框模型的一部分.整个元素或“片段”在定位时只是一个大方块.因此,如果盒子顶部有10px的边距,并且从顶部开始放置元素10px,它将在窗口顶部和可见框开始之间具有20px的边距.
我也做了一个very simple example in jsFiddle.
如果你喜欢图形,那么举个例子,红色框有一个位置：fixed：
正如您在第一部分中看到的那样,只有固定在元素上的设置位置实际上并未将其移动到任何位置.它只是将其从文档流中删除.
在section部分中,添加margin-top：10px使元素向下移动10px,因为该框现在顶部有10px的边距.然而,它实际上并没有移动到任何地方.盒子刚刚变高,因为盒子模型已经改变了.
在第三部分中,使用top：10px实际上将框移动到窗口容器顶部10px.它具有与第一部分完全相同的盒子模型.
第四节就像它上面的第二部分,除了负边距使它向上移动十个像素.盒子模型仍然更高,盒子仍然没有移动.
在元素上设置绝对位置时,如果未设置任何其他位置属性,则元素根本不会移动.因此,如果没有顶部,右侧,底部或左侧属性集,则元素将保持在它作为流的一部分呈现时所处的位置,它现在刚刚从流中移除.因此,添加正面或负面的边距会使其看起来从该位置向上或向下移动.实际上,你只是在改变元素的盒子模型.
您还必须意识到,在顶部和底部边距(甚至填充)上使用百分比与高度无关.它实际上使用宽度来计算出有多少边距.说边缘顶部：10％将使该值为可用宽度的10％,而不是可用高度,并且使其为负值将仅取消该值.我之所以提到这一点,是因为它与您在使用margin-top百分比时所链接的第一个问题相关.
我希望这涵盖了你所寻找的东西.我无法分辨你究竟是什么感到困惑,所以我尽可能地解释了.
