相对位置还是绝对位置？

相对位置还是绝对位置？

CSS绝对定位

position: absolute;

绝对定位是最容易理解的。您从CSS

position

属性开始：

position: absolute;

这告诉浏览器应将要定位的所有内容从文档的正常流程中删除，并将其放置在页面上的确切位置。它不会影响HTML中它之前或之后的元素在网页上的放置方式，但是除非您重写它，否则
它将 取决于其父级的位置。

如果你想一个元素从文档窗口的顶部10个像素的位置，你会使用

top

偏移

position

与它有

absolute

定位：

position: absolute;top: 10px;

然后

10px

，无论元素（在视觉上还是通过）在元素的上方，下方或上方经过什么内容，该元素都将始终从页面顶部显示。

四个定位属性是：

1. top

2. right

3. bottom

4. left

要使用它们，您需要将它们视为偏移属性。换句话说，定位的元素

right:2px

不会向右移动

2px

。它的右侧从窗口的右侧（或其上级覆盖父窗口）偏移

2px

。其他三个也是如此。

相对定位

position: relative;

相对定位使用与定位相同的四个定位属性

absolute

。但是，不是将元素的位置基于浏览器查看端口，而是从元素仍处于正常 流中的位置开始 。

例如，如果您的网页上有三个段落，而第三个段落上

position: relative

放置了样式，则其位置将根据其当前位置而不是从视口的原始侧面偏移。

第1段

第2段

第3段。在上面的示例中，第三段将位于

3em

容器元素的左侧，但仍将位于前两段的下方。它会保留在文档的正常流程中，并且会稍有偏移。如果将其更改为

position:absolute;

，则其后的所有内容都将显示在其顶部，因为它将不再属于文档的正常流程。

笔记：

• 默认

  width

  的是绝对定位的元素的是在其中的内容的宽度，不同于被相对定位在那里它的默认的元素

  width

  是

  100%

  该空间也可以填充的。

• 您可以使元素与绝对定位的元素重叠，而不能对相对定位的元素进行重叠（本机，即不使用负边距/定位）