css position relative absolute 同时

CSS中的position属性有多个值，其中包括relative和absolute。这两个值可以同时使用。

当元素的position属性设置为relative时，它会相对于其正常位置进行定位。也就是说，元素仍会占据文档流中的空间，并且其他元素不会被该元素覆盖。通过设置top、right、bottom和left属性，可以将相对定位的元素在其正常位置的基础上进行偏移。

相反，当元素的position属性设置为absolute时，它会脱离文档流，并相对于其最近的已定位祖先元素进行定位，如果不存在已定位的祖先元素，则相对于文档的初始包含块进行定位。通过设置top、right、bottom和left属性，可以将绝对定位的元素相对于其定位环境进行偏移。

因此，当同时设置relative和absolute时，元素会先相对于其正常位置进行定位，并且仍会占据文档流中的空间，然后再相对于定位环境进行偏移。这样可以灵活地控制元素的位置，并且不会影响其他元素的布局。

需要注意的是，relative和absolute定位的元素的定位效果会受到父元素的position属性的影响。如果父元素的position属性为static（默认值），那么相对于父元素进行定位的元素将相对于文档的初始包含块进行定位。如果父元素的position属性为relative或absolute，则相对于父元素进行定位的元素将相对于父元素进行定位。

总结起来，当同时设置CSS的position属性为relative和absolute时，元素会先相对于其正常位置进行定位，然后再相对于定位环境进行偏移。这样可以灵活地控制元素的位置，同时保持其他元素的布局不受影响。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css position: absolute、relative详解](https://download.csdn.net/download/weixin_38501810/13075425)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [CSS（层叠样式表）笔记.txt](https://download.csdn.net/download/bxy0806/88237826)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [CSS position属性absolute relative等五个值的解释](https://download.csdn.net/download/weixin_38650629/13677169)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]