Div CSS absolute与relative的区别小结

什么是相对定位和绝对定位

在CSS中，相对定位和绝对定位是指定位元素在页面中位置的两种常见方法。

相对定位

相对定位使元素相对于其正常位置定位，但仍保持文档的流动性。也就是说，相对定位不会让其他元素受到定位元素的影响。

相对定位的代码为：position:relative;

绝对定位

绝对定位使元素从文档流中取出，然后相对于其包含元素的位置进行定位。可以使用top、bottom、left和right属性来设置其位置。绝对定位的元素不会影响其他元素的布局。

绝对定位的代码为：position:absolute;

相对定位和绝对定位的区别

相对定位和绝对定位的主要区别是它们如何确定元素的位置。相对定位相对于元素正常在文档流中的位置进行定位，而绝对定位相对于其最近的定位元素进行定位。

此外，相对定位和绝对定位还有以下区别：

1. 相对定位是相对于元素原本的位置进行定位，不会影响其他元素的布局，但绝对定位会从文档流中拖出元素，可能会影响其他元素的布局。
2. 设置相对定位时，元素仍将占据原本的空间，它只是覆盖了文档流中的另一个元素，而绝对定位则会将元素从文档流中拖出。

相对定位和绝对定位的示例

以下两个示例展示了相对定位和绝对定位的区别。

相对定位示例

<div style="position:relative; top:20px; left:20px;">
  <p>This paragraph is relatively positioned 20 pixels lower and 20 pixels to the right.</p>
</div>

在这个示例中，我们将一个div元素相对于其原本的位置向下移动20个像素，并向右移动20个像素。这个元素不会从文档流中拖出。

绝对定位示例

<div style="position:relative;">
  <img src="background.jpg" style="position:absolute; top:0px; left:0px;">
  <p>This paragraph is positioned relative to the containing div with its own origin at the top left corner of the div.</p>
</div>

在这个示例中，我们将这个<p>元素相对于其包含的<div>元素进行定位。<div>使用相对定位，因为它的子元素将相对于它进行绝对定位。我们还在这个<div>元素内添加了一个<img>元素，为了使该元素和<p>元素进行对比。该元素将使用绝对定位，因为我们想要它从文档流中取出并将其置于<div>元素的顶部左侧角。