Dan*_*Man 83
如果要将(块)元素从文档流中的其他元素移开,则可以使用margin.这意味着它将推动以下元素远离/进一步向下.请注意,相邻元素的垂直边距会崩溃.
如果你想要的元素来对周围的元素没有影响,你会使用定位(绝对,相对)和top,bottom,left和right设置.
通过relative定位,元件仍将占据其原始空间,就像静态定位一样.这就是为什么没有任何事情发生,如果你只是切换static到relative位置.然后,您可以将它推到周围的元素上.
通过absolute定位,您可以从(静态)文档流中完全删除元素,从而释放它占用的空间.然后你可以自由地定位它 - 但相对于围绕它的下一个最好的非静态定位元素.如果没有,它将锚定到整个页面.
Dav*_*ave 73
top用于使用position属性调整元素.
margin-top用于测量与元素相关的外部距离.
此外,top行为可能因位置类型而异absolute,relative或fixed.
边距适用并扩展/收缩元素的正常边界,但是当您调用top时,您忽略元素的常规位置并将其浮动到特定位置.
例:
HTML:
<div id="some_element">content</div>
CSS:
#some_element {margin-top: 50%}
意味着元素将开始在其容器的50%高度显示html(即显示单词"content"的div将在div#some_element之前直接显示其包含div或html节点的50%高度)但是如果你打开你的浏览器的检查器(在Windows上为f12或在mac上为cmd + alt + i)并将鼠标悬停在元素上,您将看到它的边界突出显示,并注意元素已被按下而不是重新定位.
顶部另一方面:
#some_element {top: 50%}
实际上将重新定位元素意味着它仍将显示在其容器的50%处,但它将重新定位元素,使其边缘从其包含元素的50%开始.换句话说,元素的边缘与其容器之间将存在间隙.
干杯!