探究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.是否釋放原來的位置（比較官方的說法是「文檔流位置」）就足以應付大多數狀況了，之後應該不會再對它們傻傻分不清了吧：）