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

Question

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

Answer 1

静态定位是元素的默认定位模型。它们显示在作为正常 HTML 流的一部分呈现的页面中。静态定位元素不遵守 left、top、right 和 bottom 规则:

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

还有绝对定位——您可以指定元素相对于整个文档的确切位置，或元素树上的下一个相对定位元素:

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

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

最后是固定的。固定定位将元素限制在视口(viewport)中的特定位置，该位置在滚动期间保持原位:

您可能还会观察到固定位置元素不会导致滚动的行为，因为它们不被视为受视口(viewport)限制:

而绝对定位的元素仍然受视口(viewport)限制，并会导致滚动:

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

通过绝对定位和固定定位，元素脱离了 HTML 流。