<div style=" background: #ccc; width: 100px;position: relative;clear: both; overflow: hidden; display: inline-block;"> <div style=" z-index: 0; height: 100px; background: #ccc; width: 100px;position: relative; display: inline-block;">
1
</div> </div> <div style=" height: 100px;height: 100px; background: red; width: 100px;">2</div>
【 position:relative | absolute | static | fixed 】
來源：http://www.chinaz.com/web/2012/1121/282830.shtml
A：相對定位（position: relative）：如果對某一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直（或水平)位置（top,right,bottom,left四值），讓這個元素"相對於"它的起點進行移動。注：設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留；
B：絕對定位(position: absolute)：絕對定位使元素的位置與文檔流無關，所以不會占用空間。與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。注：設置為絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框；
C：固定定位(position: fixed)：固定定位元素的位置總以視窗左上角定位；注：IE6不兼容此屬性；
D：static ：沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級；
【定位原理：在文本流中，所有元素的位置都受文本流的限制，但我們可以通過CSS樣式去改變這些元素的位置(如：margin，float)；其實真正意義上的位移是通過top，right，bottom，left來實現的】
A：position: relative： 被相對定位元素不會脫離文檔流，它會參考自身靜態位置的左上角，通過 top，right，bottom，left進行位置移動。注：相對定位層原有位置還會繼續占用文檔流；如下圖：
紅色區域被相對定位后，相對A點通過top:20px，left:15px進行位移，但相對定位層的原有位置還會繼續保留；
B：position:absolute：被絕對定位元素會脫離文檔流，且會選取自己最近的父級定位元素，通過 top，right，bottom，left進行位置移動。注：當父級position屬性是static時，absolute位移定位置將以body的原點坐標進行計算；如 下圖：紅色區域被絕對定位后，被定位層脫離文檔流；如果A點層是 relative（或 absolute時，即紅色區域的父級），被定位層會以A點坐標通過top:20px，left:15px進行位移；當父級沒有定位時，文檔以body的 原點坐標通過top:20px，left:15px進行位移;
