深入理解css中position屬性及z-index屬性
在網頁設計中，position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性，將會給我們帶來很多意想不到的困難。
position屬性共有四種不同的定位方法，分別是static、fixed、relative、absolute,sticky。最後將會介紹和position屬性密切相關的z-index屬性。
第一部分：position: static
static定位是HTML元素的預設值，即沒有定位，元素出現在正常的流中，因此，這種定位就不會收到top，bottom,left,right的影響。
如html程式碼如下：
| 123 | <div class="wrap"><div class="content"></div></div> |
css程式碼如下：
| 12 | .wrap{width: 300px;height: 300px; background: red;}.content{position: static; top:100px; width: 100px;height: 100px; background: blue;} |
效果圖如下：
我們發現，雖然設定了static以及top，但是元素仍然出現在正常的流中。
第二部分：fixed定位
fixed定位是指元素的位置相對於瀏覽器視窗是固定位置，即使視窗是滾動的它也不會滾動，且fixed定位使元素的位置與文件流無關
html程式碼如下：
| 1 | <div class="content">我是使用fix來定位的！！！所以我相對於瀏覽器視窗，一直不動。</div> |
css程式碼如下：
| 12 | body{height:1500px; background: green; font-size: 30px; color:white;}.content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;} |
效果圖如下：
即右下角的div永遠不會動，就像經常彈出來的廣告！！！
值得注意的是：fixed定位在IE7和IE8下需要描述！DOCTYPE才能支援。
第三部分：relative定位
相對定位元素的定位是相對它自己的正常位置的定位。
關鍵：如何理解其自身的座標呢？
讓我們看這樣一個例子，hmtl如下：
| 123 | <h2>這是位於正常位置的標題</h2><h2 class="pos_bottom">這個標題相對於其正常位置向下移動</h2><h2 class="pos_right">這個標題相對於其正常位置向右移動</h2> |
css程式碼如下：
| 12 | .pos_bottom{position:relative; bottom:-20px;}.pos_right{position:relative;left:50px;} |
效果圖如下：
即bottom:-20px;；向下移動。 left:50px;向右移動。
即可以理解為：移動後是移動前的負的位置。
比如上例中，移動後是移動前負的bottom:-20px;即移動後是移動前bottom:20px;也就是說，移動後是移動前的向下20px；
又如：left:50px;移動後是移動前左邊的-50px;那麼也就是說移動後是移動前的右邊的50px。
即：移動後對於移動前：如果值為負數，則直接換成整數；如果值為整數，則直接改變相對方向。
弄清楚了relative是如何移動的，下面我們看一看移動之後是否會產生其他的影響。
html程式碼如下：
| 123 | <h2>這是一個沒有定位的標題</h2><h2 class="pos_top">這個標題是根據其正常位置向上移動</h2><p><b>注意:</b> 即使相對定位元素的內容是移動,預留空間的元素仍儲存在正常流動。</p> |
css程式碼如下：
| 1 | h2.pos_top{position:relative;top:-35px;} |
效果圖如下：
根據之前的說法，top:-35px；值是負數，則直接換成正數，即移動後相對與移動前向上偏移了35px；我們發現於上，移動後和上面的元素髮生了重疊；於下，即使相對元素的內容移動了，但是預留空間的元素仍然儲存在正常流動，也就是說相對移動之後，不會對下面的其他元素造成影響。
注意：top：20px；是指子元素的margin外側和包裹元素的border內側之間的距離是20px。
第四部分：absolute定位
絕對定位的元素相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
下面舉幾個例子：
例子1：
| 12345678910111213141516171819 | <!DOCTYPE html><html lang="en">
|