头寸和保证金之间的差异

Question

之间有什么区别

position : relative;
bottom : 10px;

并且：

margin-top: -10px;

在我看来，他们是一样的不是吗？

Answer 1

没有;如果你给出一些position: relative并将其拉出10个像素，它将会移动，但继续占据（就其盒子而言）它之前占据的10个像素。

如果您提供margin并将其拉出10像素，它会向上移动并将其下面的所有内容都带到它下面。

小提琴：http://jsfiddle.net/2cY8F

Answer 2

当您使用position:relative时，它会将元素定位在文档流程中的正常位置，然后将其移动到偏移位置。它最初占据的空间在布局中保留（左空）。

<强> FIDDLE DEMO for position: relative

然而，

Margins不是定位属性，实际上它是用于在页面上创建块框的框模型的一部分。它是元素的边缘与下一个相邻元素的边缘之间存在的空间。

<强> FIDDLE DEMO for margin

同时检查Negative margins vs relative positioning

Answer 3

边距是元素框边缘与整个框边缘之间的空格，例如字母边缘。

position属性指定用于元素的定位方法的类型（静态，相对，绝对或固定）。

在你的第一个案例中，你有一个相对定位的元素。对于相对定位的元素，bottom属性将元素的下边缘设置为高于/低于其正常位置的单位。

你的第二个案例完全由设置margin-top来改变元素的“边界框”。

Answer 4

如果使用位置，则元素从顶部显示为10px。 如果你使用保证金，元素将从顶部“推”自己，在它周围增加空间。

我将添加一张图片来解释

灰黑框显示你的div。 图片的前半部分显示位置，第二部分显示边距，黄色部分是边距。

Answer 5

嗯，这取决于你的结构。第一个将向上移动元素10px，第二个将从父元素的底部移动元素10px。

要查看差异，请尝试使用比外部元素小得多的内部元素。像500px元素内的100px高度应该给你清晰的画面。

让我知道你的想法。