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

1、实例讲解css中相对定位和绝对定位的用法和区别一、相对定位相对定位是指，该元素相对自己本来位置，偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。它相对的是它自己。举例：大div里面包含5个小p，给p不同的类名，分离设置肯定定位和相对定位，看看他们有什么变幻没有设置定位的代码如下：12345678910111213141516171819202122232425 *padding: 0;margin: 0; .boxwidth: 400px;height: 500px;border: 1px solid black;margin: 50px a

2、uto; .p1width: 100px;height: 100px;background: red; .p2width: 100px;height: 100px;background: orange; .p3width: 100px;height: 100px;background: yellow; .p4width: 100px;height: 100px;background: green; .p5width: 100px;height: 100px;background: purple; 11 22 33 44 55 效果现在给第一个p标签设置相对定位，让他相对于自己本来的位置上偏移5

3、0px，左边偏移50px，详细代码如下：1.p1width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;效果图：对照前后效果图，有没有发觉第一个p元素，它相对自己本来的位置发生了偏移，而且偏移以后，它依旧占领本来的位置，后面的元素不会填补，假如有重叠，会重叠在它文档流元素之上，相对定位不会把其他元素挤掉。二、肯定定位肯定定位是指，该元素相对它的父元素偏移一定距离，元素可以通过顶部top，底部bottom，左侧left和右侧right属性来设置定位。注：相对的是父元素，而且这个父元素必需

4、设置了position属性。假如父元素没有position属性，则从最近的父元素开头找，直到找到body为止。举例：给第三个p元素设置肯定定位，让其上偏移200px，左偏移200px，详细代码如下：1.p3width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;效果图：对照图1和图3可以发觉，设置了肯定定位的元素，会脱离文档流，后面的元素会填补上来。由于第三个p标签的父元素为div，没有给div设置position属性，所以它终于找到body，相对于body发生了偏移。三、相对定位和肯定定位的区分相对定位：相对自己本来的位置发生偏移，不会脱离文档流，不会删除它本来在文档流中占领的位置，且后面是元素不会填补空位肯定定位：相对它的父元素发生偏移（而且这个父元素必需设置了position属性，假如父元素没有position属性，则从最近的父元素开头找，直到找到body为止），会脱离文档流，后面的元素会填补它本来的位置。以上给大家介绍