CSS中相对定位和绝对定位的⽤法和区别（图⽂）
CSS中的position属性可以设置元素的定位类型，⽐如fixed，relative，absolute等等，但是很多⼈搞不懂relative相对定位和absolute绝对定位的区别，这篇⽂章就和⼤家讲讲什么是绝对定位，什么是相对定位，以及相对定位和绝对定位的区别，有⼀定的参考价值，感兴趣的朋友可以参考⼀下。
⼀、相对定位
相对定位是指，该元素相对⾃⼰原来位置，偏移⼀定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它⾃⼰。
举例：⼤div⾥⾯包含5个⼩P，给P不同的类名，分别设置绝对定位和相对定位，看看他们有什么变化
没有设置定位的代码如下：
效果如图所⽰：
现在给第⼀个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;}
position标签属性效果图：
对⽐图1和图3可以发现，设置了绝对定位的元素，会脱离⽂档流，后⾯的元素会填补上来。因为第三个p标签的⽗元素为div，没有给div设置position属性，所以它最终到body，相对于body发⽣了偏移。
三、相对定位和绝对定位的区别
相对定位：相对⾃⼰原来的位置发⽣偏移，不会脱离⽂档流，不会删除它原来在⽂档流中占据的位置，且后⾯是元素不会填补空位
绝对定位：相对它的⽗元素发⽣偏移（⽽且这个⽗元素必须设置了position属性，如果⽗元素没有position属性，则从最近的⽗元素开始，直到到body为⽌），会脱离⽂档流，后⾯的元素会填补它原来的位置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。