Div CSS absolute与relative的区别小结
什么是相对定位和绝对定位
在CSS中，相对定位和绝对定位是指定位元素在页面中位置的两种常见方法。
相对定位
相对定位使元素相对于其正常位置定位，但仍保持文档的流动性。也就是说，相对定位不会让其他元素受到定位元素的影响。
相对定位的代码为：position:relative;
绝对定位
绝对定位使元素从文档流中取出，然后相对于其包含元素的位置进行定位。可以使用top、bottom、left和right属性来设置其位置。绝对定位的元素不会影响其他元素的布局。
绝对定位的代码为：position:absolute;
相对定位和绝对定位的区别
相对定位和绝对定位的主要区别是它们如何确定元素的位置。相对定位相对于元素正常在文档流中的位置进行定位，而绝对定位相对于其最近的定位元素进行定位。
此外，相对定位和绝对定位还有以下区别：
- 相对定位是相对于元素原本的位置进行定位，不会影响其他元素的布局，但绝对定位会从文档流中拖出元素，可能会影响其他元素的布局。
- 设置相对定位时，元素仍将占据原本的空间，它只是覆盖了文档流中的另一个元素，而绝对定位则会将元素从文档流中拖出。
相对定位和绝对定位的示例
以下两个示例展示了相对定位和绝对定位的区别。
相对定位示例
<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>元素的顶部左侧角。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！