css的相对定位和绝对定位的概念和区别

相对定位和绝对定位是CSS中常用的定位方式，它们有一些区别。

相对定位(position: relative)是相对于元素自身原来的位置进行移动。当一个元素被设置为相对定位时，它会在原来的位置上出现，并且可以通过设置top、bottom、left、right属性来移动元素的位置。例如，设置top为20px，元素会在原来位置的下方20像素处。相对定位不会改变元素的文档流位置，也不会占据其他元素的空间。此外，相对定位还会激活z-index属性，使元素的层叠级别高于普通文档流中的元素，可以覆盖其他元素。

绝对定位(position: absolute)使元素的位置与文档流无关，不占据空间。绝对定位的元素会脱离普通文档流，可以通过设置top、bottom、left、right属性来精确地定位元素的位置。绝对定位的参考对象是最近的已定位祖先元素，如果没有已定位的祖先元素，则参考的是文档的初始坐标。绝对定位的元素不会保留原来的位置，因此有可能导致元素重叠。

总结一下，相对定位是相对于元素自身进行移动，不改变文档流位置，不占据其他元素的空间；而绝对定位是相对于最近的已定位祖先元素进行移动，不占据空间，可能导致元素重叠。
#### 引用[.reference_title]
- *1* [CSS相对定位和绝对定位的区别](https://blog.csdn.net/MAKEJAVAMAN/article/details/104997628)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [CSS相对定位与绝对定位](https://blog.csdn.net/weixin_39664136/article/details/119397304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [CSS相对定位和绝对定位](https://blog.csdn.net/m0_46527751/article/details/123993295)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]