静态和相对定位之间的区别

在CSS中，静态（默认）定位和相对定位有什么区别？

静态定位是元素的默认定位模型。它们显示在他们作为普通HTMLstream的一部分呈现的页面中。静态定位元素不遵守left ， top ， right和bottom规则：

静态定位的元素遵循正常的HTML流程。

相对定位允许您指定一个特定的偏移量（ left ， top等），这是相对于HTMLstream中元素的正常位置。所以，如果我有一个div内的文本框我可以应用相对定位的文本框，以显示在特定的地方，相对于它通常会放在div ：

相对定位的元素遵循HTML流程，但提供了相对于HTML流程中的正常位置调整其位置的能力。

还有绝对定位 – 可以指定元素相对于整个文档的确切位置，也可以指定元素树的下一个相对定位的元素 ：

绝对定位的元素从HTML流中提取出来，并可以放置在文档中的特定位置。

当一个position: relative被应用到层次结构中的父元素时：

...或相对于相对定位的HTML树中的第一个父元素进行定位。

请注意我们的绝对位置元素是如何被相对定位的元素绑定的。

最后是固定的。固定位置将元素限制在视口中的特定位置，该位置在滚动过程中保持不变：

固定位置的元素也从HTML流中取出，但不受视口的限制，不会随页面一起滚动。

您也可以观察到固定位置的元素不会导致滚动的行为，因为它们不被视为受到视口的约束：

固定位置的元素对滚动没有影响。

而绝对定位的元素仍然受到视口的约束，并将导致滚动：

绝对定位的元素仍然受到视口边界的影响，除非在父元素上使用溢出。

..当然你的父母元素使用overflow: ? 确定滚动的行为（如果有的话）。

通过绝对定位和固定定位，将元素从HTMLstream中提取出来。

相对位置可让您使用上/下/左/右进行定位。静态不会让你这样做，除非你使用保证金参数。 Top和margin-top之间有区别。

你不需要使用静态，因为它是默认的

你可以在这里看到一个简单的概述： W3School

另外，如果我记得正确的话，当声明一个元素相对的时候，默认情况下它会保持在原来的位置，但是你可以在元素内部相对于这个元素绝对地定位元素，而我发现它非常有用以往。

相对位置相对于正常stream量。该元素的相对位置（带有偏移量）相对于该元素如果不移动通常会正常的位置。

马修雅培有一个非常好的答案。

绝对和相对定位的项目遵循静态定位项目所不具有的top ， left ， right和bottom命令（偏移量）。

相对定位的项目将从通常在html中的位置移动偏移量。

绝对定位的项目从文档或DOM树中的下一个相对定位的元素移动偏移量。

在回答“为什么CSS仍然会实现位置：静态”。在一个scenerio中，使用位置：相对于父母和位置：孩子的绝对限制孩子的缩放宽度。在一个水平的菜单系统中，你可以有“列”的链接，使用“宽度：自动”不适用于相对父母。在这种情况下，将其更改为“静态”将允许宽度根据内部的内容而变化。

我花了好几个小时想知道为什么我不能根据内容的数量来调整我的容器。希望这可以帮助！

静态：静态定位元素是我们通过DEFAULT（对象的正常定位）得到的。

相对：相对于当前位置，但可以移动。或者一个RELATIVE定位元素相对于ITSELF定位。