相对定位

每一个元素都可以看作一个盒子，文档流就是由这些盒子堆砌而成，而每个盒子都在这个文档流中占据了一个位置，如果我们把这个盒子设置成相对定位，那么就可以拿起这个盒子相对于它原来所占据的位置向别的地方移动，如设置 left:50px 就是相对于盒子原来位置向右移动了 50 个像素，我们例子来说明。

我们把 box-2 设置成相对定位并向左移动 60 像素，向下移动 120 像素。

 .box-2{background-color: #00A5FF;position: relative;left: 60px;top:120px;}

则变为下面的情况

从上图我们可以发现 box-2 相对于它原来的位置向下且向右移动了，并且原来的位置留下了一片空白，但是其他的元素并没有占据它，说明元素设置相对定位后，可以相对于其在普通流中的位置偏移，原本所占的空间仍保留。

同时我们从图上可以看出，box-2 移动之后覆盖了其他的元素，这说明当元素被设置相对定位后，将激活 z-index 属性，其层叠级别高于原本的文档流。此时如果给 box-5 也设置 position: relative，那么 box-5 又会覆盖 box-2。

绝对定位

绝对定位的参照物是相对于该元素最近的已定位的祖先元素，如果没有一个祖先元素设置定位，那么参照物是 body。

绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，漂浮在文档流上方，并且后面的元素将会填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物则需要根据它祖先元素的定位设置来确定。我们就用实例说明绝对定位的特点和需要注意的地方。
例如

祖先元素都没有设置定位，元素相对于 body 转移位置。
给 box-2 设置成 position: absolute;

 .box-2{background-color: #00A5FF;position: absolute;}

则出现下面的结果

我们可以看到最后一个 box 存在的位置空了出来，这是因为 box-2 脱离文档流漂浮到文档上方，并且后面的元素填补了上去，说明元素设置绝对定位后脱离文档流，后面的元素将填补它的位置。

接着你可能就会发现 box-3 失踪了，其实它没有失踪，它是在 box-2 下面，就像相对定位一样，当元素被设置绝对定位后，将激活 z-index 属性，其层叠级别高于原本的文档流。

你可能会问了，不是说祖先元素都没有定位时，元素会相对于 body 来改变自己的位置吗，为什么它还是飘在原来的位置，而没有飘到 body 顶头呢，那么请看，我把 left 和 top 属性加上会出现什么样的结果。

如果加上left和top属性

.box-2{background-color: #00A5FF;position: absolute;left: 0;top:0;}

现在可以看到它与 body 顶头了，因为光设置一个元素的相对定位它只会漂浮到原来位置的上空，并不会漂浮到参照物的文档流最前方，而只有设置了 left、top、right、bottom 这些参数的时候才能激活它相对于参照物移动的效果。

祖先元素 grandpa 设置定位，元素相对于 grandpa 转移位置

 .grandpa{background-color: #55a532;height: 500px;width: 600px;margin: 40px;position: relative;} .box-2{background-color: #00A5FF;position: absolute;left: 20px;top:20px;}

当祖先元素不止一个设置了定位的时候，选择最近的一个作为参照物。

绝对定位和相对定位的区别相关推荐

CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一.绝对定位二.相对定位三.绝对定位与相对定位的区别四.绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些 ...
CSS中，position的绝对定位和相对定位的区别
CSS中,position的绝对定位和相对定位的区别 1.position的四个值:static.relative.absolute.fixed 绝对定位:absolute和fixed统称为绝对定位 ...
关于绝对定位与相对定位的区别和用法
Hello大家好,我们这次来详细说下关于绝对定位以及相对定位的知识. 相对定位及其用法顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏.相对定位的css样式代码是这样的:position: ...
css中的定位以及绝对定位和相对定位的区别
一:绝对定位 (position: absolute) 绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是 ...
绝对定位和相对定位的区别（详解）
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
绝对定位和相对定位的区别？
一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对 ...
CSS position中绝对定位和相对定位的区别以及占位问题
!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS中的盒子 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...

绝对定位和相对定位的区别

相对定位与绝对定位

相对定位

绝对定位

绝对定位和相对定位的区别相关推荐

最新文章

热门文章