探究position定位中absolute和relative的异同

一、默认定位

HTML结构如下：

和

是为了与窗口的顶部隔开距离便于观察，neighboor和child2的div是为了对比位置，我们真正需要定位的焦点放在了child1的div上。

 

 

Position Attribute

Relative & Absolute

                   

 

CSS如下：

.parent{background-color: yellow;height:200px;width:200px;display: inline-block;}.child1{background-color: green;height:100px;width:100px;}.child2{background-color: royalblue;height:50px;width:50px;}.neighboor{background-color: pink;height:200px;width:200px;display: inline-block;}

我们来看一下默认定位的效果（特意留出地址栏方便观察位置对比）

 

二、relative定位

首先我们来看一下官方的解释：生成相对定位的元素，相对于其正常位置进行定位。我们来尝试一下在child1中加入relative定位，并且辅以top和left位移值：

.child1{background-color: green;height:100px;width:100px;position: relative;top:20px;left:20px;}

效果如下：

 

我们看到绿色方块代表的child1和原来的位置相比top和left偏移了，但是其他的div都安分守己地待在原处，就好像child1的位移并没有对它们造成任何影响。

所以我们总结relative定位：

1.相对于元素原来的位置进行相应的位移；

2.其他元素的位置并不受影响，也就是说被定位的元素原来的位置还存在占位，并没有释放。

三、absolute定位

首先我们还是来看一下官方的解释：生成绝对定位的元素，相对于默认定位以外的第一个父元素进行定位。我们尝试一下在child1中加入absolute定位：

.child1{background-color: green;height:100px;width:100px;position: absolute;top:20px;left:20px;}

我们看到效果如下：

 

我们观察到，绿色块代表的child1是相对于浏览器视口进行了位移，而且它原来所占的位置被释放掉，被紫色块代表的child2给占领了。这里我们容易得到absolute和relative最重要的一个区别：relative定位不释放原来所占的位置，absolute定位释放原来所占的位置。还有个悬而未决的地方，就是absolute定位到底相对于谁进行位移的，在我们刚刚的试验中，“貌似”是相对于浏览器视口进行偏移的，但是事实真的如此吗？我们来研究一下官方的那句定义“相对于默认定位以外的第一个父元素进行定位”。在我们刚刚的试验中，parent、container、body都是chidl1的父元素，但是parent和container都是默认定位，所以“默认定位以外的第一个父元素”就是body元素了。那现在我们给parent进行relative定位（这里不需要设置LTRB偏移值，只是消除parent的默认定位属性），看到结果如下：

 

果然如和我们所料，这个时候“默认定位以外的第一个父元素”就是parent了，所以这次child1是相对于黄色块代表的div进行偏移的，而由于它释放了原来所占的位置，紫色块代表的div2就占领了它的位置。

总结一下absolute定位：

相对于谁进行定位有点复杂：就是找出定位元素父元素链上的所有父元素，由近到远哪个元素不是默认定位（即static定位）的，那么就相对于它进行定位。

定位元素会释放原来所占的位置，其他元素会补充进来，好似float属性让其漂浮起来一样。

当父元素链上所有父元素都是默认定位，那么absolute定位就是相对于body元素的，效果和fix定位差不多。