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

相信学过CSS的同窗都曾经对于position的各类属性很困惑，尤为是absolute和relative定位，简直就是傻傻分不清，笔者写这篇文章就是但愿经过代码实验的方式来揭露absolute和relative定位的本质区别。

1、默认定位

HTML结构以下：<h1>和<h2>是为了与窗口的顶部隔开距离便于观察，neighboor和child2的div是为了对比位置，咱们真正须要定位的焦点放在了child1的div上。

<h1>Position Attribute</h1>
<h2>Relative & Absolute</h2>
<div class="container">
  <div class="neighboor"></div>
  <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>
</div>

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;
}

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

2、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.其余元素的位置并不受影响，也就是说被定位的元素原来的位置还存在占位，并无释放。

3、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定位：

1. 相对于谁进行定位有点复杂：就是找出定位元素父元素链上的全部父元素，由近到远哪一个元素不是默认定位（即static定位）的，那么就相对于它进行定位。
2. 定位元素会释放原来所占的位置，其余元素会补充进来，好似float属性让其漂浮起来同样。
3. 当父元素链上全部父元素都是默认定位，那么absolute定位就是相对于body元素的，效果和fix定位差很少。

相信经过以上的代码实现探究，你们已经对absolute和relative定位有了更深入的认识，其实只要把握两点：1.相对于谁定位 2.是否释放原来的位置（比较官方的说法是“文档流位置”）就足以应付大多数状况了，之后应该不会再对它们傻傻分不清了吧：）