CSS 中的 position:absolute 和 position:relative 有什么区别？ [复制]

Question

为什么absolute 填充内容宽度，不像relative 填充整个宽度。

position:absolute;
position:relative;

我不确定它们是如何工作的。

Answer 1

相对
这种类型的定位可能是最令人困惑和误用的。它的真正含义是“相对于自身”。如果设置位置：相对；在一个元素上，但没有其他定位属性（顶部、左侧、底部或右侧），它根本不会影响它的定位，它将与您将其保留为 position: static;但是如果你给它一些其他的定位属性，比如top: 10px;，它的位置会从它通常的位置向下移动10个像素。我相信您可以想象，根据元素的常规位置移动元素的能力非常有用。我发现自己多次使用它来排列表单元素，这些元素往往不想按照我想要的方式排列。
设置位置时还会发生另外两件事：相对；在您应该注意的元素上。一是它引入了在该元素上使用 z-index 的能力，这实际上不适用于静态定位的元素。即使您没有设置 z-index 值，该元素现在也会出现在任何其他静态定位元素的顶部。您无法通过在静态定位的元素上设置更高的 z-index 值来对抗它。发生的另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块内。这带来了一些我在这里谈到的强大机会。

绝对
这是一种非常强大的定位类型，可让您将任何页面元素准确地放置在您想要的位置。您使用定位属性top、left、bottom。和设置位置的权利。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父元素，它将默认一直回到元素本身，这意味着它将相对于页面本身放置。
关于绝对定位的权衡（也是要记住的最重要的事情）是这些元素从页面上的元素流中删除。具有这种定位的元素不受其他元素的影响，也不会影响其他元素。每次使用绝对定位时，这是一件需要认真考虑的事情。过度使用或不当使用会限制您网站的灵活性。