失眠网 > 实例讲解CSS中相对定位和绝对定位的用法和区别（图文）

实例讲解CSS中相对定位和绝对定位的用法和区别（图文）

时间：2023-01-15 06:42:46

web前端|css教程

CSS,相对定位,绝对定位

web前端-css教程

CSS中的position属性可以设置元素的定位类型，比如fixed，relative，absolute等等，但是很多人搞不懂relative相对定位和absolute绝对定位的区别，这篇文章就和大家讲讲什么是绝对定位，什么是相对定位，以及相对定位和绝对定位的区别，有一定的参考价值，感兴趣的朋友可以参考一下。

源码吧全站数据打包,VSCode怎么打开xls,ubuntu终端消失,tomcat8 模式,蛇爬虫,php 底层源码,宁波seo外包哪家不错,网站模版调用标签教程,苹果cms电影模板下载lzw

A、相对定位

asp视频站源码云盘下载器,ubuntu下jdk下载,tomcat添加404页面,python爬虫豆瓣源码,php教程视频app安卓,集成seo工具lzw

相对定位是指，该元素相对自己原来位置，偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它自己。

暴风影音的源码,vscode打开侧边栏,ubuntu关机卡在,tomcat的最大容量,爬虫管理监控,asp转换php工具,北京品质seo优化哪家好,多表格手机网站模板下载不了,dede织梦通用wap模板lzw

举例：大div里面包含5个小P，给P不同的类名，分别设置绝对定位和相对定位，看看他们有什么变化

没有设置定位的代码如下：

*{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;}

效果如图所示：

现在给第一个p标签设置相对定位，让他相对于自己原来的位置上偏移50px，左边偏移50px，具体代码如下：

.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

效果图：

对比前后效果图，有没有发现第一个p元素，它相对自己原来的位置发生了偏移，而且偏移以后，它依然占据原来的位置，后面的元素不会填补，如果有重叠，会重叠在它文档流元素之上，相对定位不会把其他元素挤掉。

B、绝对定位

绝对定位是指，该元素相对它的父元素偏移一定距离，元素可以通过顶部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发生了偏移。