css中相对定位与绝对定位的区别：

CSS中相对定位与绝对定位的区别：

在文档流中，每个块元素都会被安排到流中的一个位置，我们可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位，也就是position属性的relative和absolute值。

一、相对定位（relative）：

如果我对某元素设置了相对定位，那么首先这个元素它会跟其它的元素一样，出现在文档流中该出现的位置，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。有三个浮动的块，第二个块是设置了相对定位position:relative的，它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。给第二个块设置一个偏移：left:50px; top:30px; 发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。

二、绝对定位（absolute）：

设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，位置将依据浏览器左上角的0点开始计算，绝对定位使元素与文档流无关，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。它相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最先的包含块。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。）
我们在这里设置两个div颜色分别为红色和蓝色，先称红色div为父盒子，蓝色div为子盒子。在两者都没有特殊定位下，父盒子包含子盒子。当子盒子相对定位，父盒子没有定位，则子盒子相对自己原来的位置偏移。当子盒子绝对定位，父盒子没有定位，则子盒子以网页左上角进行偏移。当子盒子相对定位，父盒子绝对定位/相对定位，则子盒子相对自己原来的位置进行定位。当子盒子绝对定位，父盒子绝对定位/相对定位，则子盒子基于父盒子左上角定位。

举例操作方法：

01

如图，书写两个div，一个div里面包含有另一个div，并且分别给它们添加一个类。

02

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



03

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



04

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



05

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



06

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



07

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



08

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



09

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



10

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