HTML中怎样区别绝对定位和相对定位呢？

Question

如题所述

Answer 1

网页布局经常用到相对定位和绝对定位，但是有些小伙伴对于相对定位和绝对定位还不是很了解，今天小编我就来给大家深入分析分析。
如图，书写两个div，一个div里面包含有另一个div，并且分别给它们添加一个类。

然后我们使用*来清除所有元素的margin和padding。

然后我们先来设置rone这个类，这里我就设置成红颜色，并且距离浏览器顶部200像素。

保存预览，可以看到，带有rone类的div变成了红颜色，并且它距离浏览器顶部有一定的距离哦。

接着设置rtwo类的属性，这里我就设置成蓝色，与红色区别开来。

如图，可以看到红颜色的div里面包含有蓝颜色的div,在没有特殊定位下，它们位置如图所示。

接着我们把rtwo的position属性设置为relative（相对定位），然后设置left和top的值，表示往右和往下偏移20px。

接着看看设置相对定位之后的位置变化，可以看到，蓝色的div偏移了，并且是相对它自己原来的位置。也就是说，相对定位是相对自己原来的位置来进行定位的。

接着我们再去修改rtwo的position，把它改为absolute，看看会发生什么状况。

如图，蓝色div设置绝对定位之后，会跑出红色div的范围，变成以网页的左上角为标准，进行定位，而不是以自己的位置为标准进行定位。

接着我们来设置rone的position属性为absolute或者relative，这里我就设置absolute了。

然后，再来看看定位效果，可以看到，蓝色div又跑回红色div里面了。 这里，我们先称红色div为父盒子，蓝色div为子盒子。 在两者都没有特殊定位下，父盒子包含子盒子。当子盒子相对定位，父盒子没有定位，则子盒子相对自己原来的位置偏移。当子盒子绝对定位，父盒子没有定位，则子盒子以网页左上角进行偏移。当子盒子相对定位，父盒子绝对定位/相对定位，则子盒子相对自己原来的位置进行定位。当子盒子绝对定位，父盒子绝对定位/相对定位，则子盒子基于父盒子左上角定位。