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

Question

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

Answer 1

对于“为什么CSS仍然会实现position:static;”的答案，在某种情况下，对于父元素使用position:relative，对于子元素使用position:absolute会限制子元素的缩放宽度。在水平菜单系统中，您可能会有链接的'列'，使用'width:auto'无法与相对父元素一起使用。在这种情况下，将其更改为'static'将允许宽度根据其中的内容变化。

我花了好几个小时纠结于为什么无法根据其中的内容调整容器的大小。希望这能帮到您！

Answer 2

静态定位是元素的默认定位模型。它们以正常的HTML流的一部分渲染在页面上显示。静态定位的元素不遵守left、top、right和bottom规则：

相对定位允许您指定相对于元素在HTML流中的正常位置的特定偏移量（如left、top等）。因此，如果我在一个div中有一个文本框，我可以在文本框上应用相对定位，以便它显示在相对于它在div中通常放置的位置的特定位置：

还有绝对定位 - 您可以指定元素相对于整个文档的确切位置，或者相对于元素树中更高级别的下一个相对定位元素：

当在层次结构中的父元素应用了position: relative时：

请注意，我们的绝对定位元素受到相对定位元素的限制。

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

您还可以观察到固定定位元素不会引起滚动，因为它们不被视为受视口限制的元素：

而绝对定位元素仍然受到视口的限制，并会引起滚动：

除非当然您的父元素使用overflow: ?来确定滚动的行为（如果有）。

使用绝对定位和固定定位，元素会脱离HTML流。