CSS中的position属性可以设置元素的定位类型，比如fixed，relative，absolute等等，但是很多人搞不懂relative相对定位和absolute绝对定位的区别，这篇文章就和大家讲讲什么是绝对定位，什么是相对定位，以及相对定位和绝对定位的区别，有一定的参考价值，感兴趣的朋友可以参考一下。
一、相对定位
相对定位是指，该元素相对自己原来位置，偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它自己。
举例：大div里面包含5个小P，给P不同的类名，分别设置绝对定位和相对定位，看看他们有什么变化
没有设置定位的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
.box{width: 400px;height: 500px;border: 1px solid black;margin: 50px auto;}
.p1{width: 100px;height: 100px;background: red;}
.p2{width: 100px;height: 100px;background: orange;}
.p3{width: 100px;height: 100px;background: yellow;}
.p4{width: 100px;height: 100px;background: green;}
.p5{width: 100px;height: 100px;background: purple;}
</style>
</head>
<body>
<div class="box">
<p class="p1">11</p>
<p class="p2">22</p>
<p class="p3">33</p>
<p class="p4">44</p>
<p class="p5">55</p>
</div>
</body>
</html>效果如图所示：
现在给第一个p标签设置相对定位，让他相对于自己原来的位置上偏移50px，左边偏移50px，具体代码如下：
.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}效果图：
对比前后效果图，有没有发现第一个p元素，它相对自己原来的位置发生了偏移，而且偏移以后，它依然占据原来的位置，后面的元素不会填补，如果有重叠，会重叠在它文档流元素之上，相对定位不会把其他元素挤掉。
二、绝对定位
绝对定位是指，该元素相对它的父元素偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。
注：相对的是父元素，而且这个父元素必须设置了position属性。如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止。
举例：给第三个p元素设置绝对定位，让其上偏移200px，左偏移200px，具体代码如下：
.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}效果图：
对比图1和图3可以发现，设置了绝对定位的元素，会脱离文档流，后面的元素会填补上来。因为第三个p标签的父元素为div，没有给div设置position属性，所以它最终找到body，相对于body发生了偏移。
三、相对定位和绝对定位的区别
相对定位：相对自己原来的位置发生偏移，不会脱离文档流，不会删除它原来在文档流中占据的位置，且后面是元素不会填补空位
绝对定位：相对它的父元素发生偏移（而且这个父元素必须设置了position属性，如果父元素没有position属性，则从最近的父元素开始找，直到找到body为止），会脱离文档流，后面的元素会填补它原来的位置。
以上给大家介绍了什么是相对定位，什么是绝对定位，以及相对定位和绝对定位的区别，初学者一定要自己动手尝试，希望这篇文章对你有所帮助！
更多相关视频教程请访问：CSS教程
以上是实例讲解CSS中相对定位和绝对定位的用法和区别（图文）的详细内容。更多信息请关注PHP中文网其他相关文章！
什么是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章讨论了CSS FlexBox，这是一种布局方法，用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法，将其与CSS网格进行了比较，并详细浏览了浏览器支持。
我们如何使用CSS使网站迅速响应？Apr 30, 2025 pm 03:19 PM本文讨论了使用CSS创建响应网站的技术，包括视口元标签，灵活的网格，流体媒体，媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用，并推荐CSS框架
CSS盒装属性有什么作用？Apr 30, 2025 pm 03:18 PM本文讨论了CSS盒装属性，该属性控制了元素维度的计算方式。它解释了诸如Content-Box，Border-Box和Padding-Box之类的值，以及它们对布局设计和形式对齐的影响。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
Atom编辑器mac版下载
最流行的的开源编辑器
SublimeText3汉化版
中文版，非常好用
