一、默認(rèn)定位
HTML結(jié)構(gòu)如下：
和
是為了與窗口的頂部隔開距離便于觀察，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;}
我們來看一下默認(rèn)定位的效果（特意留出地址欄方便觀察位置對比）
二、relative定位
首先我們來看一下官方的解釋：生成相對定位的元素，相對于其正常位置進行定位。我們來嘗試一下在child1中加入relative定位，并且輔以top和left位移值：
.child1{background-color: green;height:100px;width:100px;position: relative;top:20px;left:20px;}
效果如下：
我們看到綠色方塊代表的child1和原來的位置相比top和left偏移了，但是其他的div都安分守己地待在原處，就好像child1的位移并沒有對它們造成任何影響。
所以我們總結(jié)relative定位：
1.相對于元素原來的位置進行相應(yīng)的位移；
2.其他元素的位置并不受影響，也就是說被定位的元素原來的位置還存在占位，并沒有釋放。
三、absolute定位
首先我們還是來看一下官方的解釋：生成絕對定位的元素，相對于默認(rèn)定位以外的第一個父元素進行定位。我們嘗試一下在child1中加入absolute定位：
.child1{background-color: green;height:100px;width:100px;position: absolute;top:20px;left:20px;}
我們看到效果如下：
我們觀察到，綠色塊代表的child1是相對于瀏覽器視口進行了位移，而且它原來所占的位置被釋放掉，被紫色塊代表的child2給占領(lǐng)了。這里我們?nèi)菀椎玫絘bsolute和relative最重要的一個區(qū)別：relative定位不釋放原來所占的位置，absolute定位釋放原來所占的位置。還有個懸而未決的地方，就是absolute定位到底相對于誰進行位移的，在我們剛剛的試驗中，“貌似”是相對于瀏覽器視口進行偏移的，但是事實真的如此嗎？我們來研究一下官方的那句定義“相對于默認(rèn)定位以外的第一個父元素進行定位”。在我們剛剛的試驗中，parent、container、body都是chidl1的父元素，但是parent和container都是默認(rèn)定位，所以“默認(rèn)定位以外的第一個父元素”就是body元素了。那現(xiàn)在我們給parent進行relative定位（這里不需要設(shè)置LTRB偏移值，只是消除parent的默認(rèn)定位屬性），看到結(jié)果如下：
果然如和我們所料，這個時候“默認(rèn)定位以外的第一個父元素”就是parent了，所以這次child1是相對于黃色塊代表的div進行偏移的，而由于它釋放了原來所占的位置，紫色塊代表的div2就占領(lǐng)了它的位置。
總結(jié)一下absolute定位：
相對于誰進行定位有點復(fù)雜：就是找出定位元素父元素鏈上的所有父元素，由近到遠哪個元素不是默認(rèn)定位（即static定位）的，那么就相對于它進行定位。
定位元素會釋放原來所占的位置，其他元素會補充進來，好似float屬性讓其漂浮起來一樣。
當(dāng)父元素鏈上所有父元素都是默認(rèn)定位，那么absolute定位就是相對于body元素的，效果和fix定位差不多。
