CSS的四大布局層級 和 HTML標籤的‘生態系統’（四）------定位層

標籤：它的   地方   --   總結   屬性   css   接下來   bottom   fixed   

　　定位層，在一些情況下，元素隨機擺放，在文檔層和浮動層中布局已經遠遠無法滿足需求，這時，我們將會使用定位屬性。

　　在一般的頁面中，常用到的定位有三種----相對定位、絕對位置、固定定位。接下來我們一一瞭解一下這三種定位。

　　相對定位（position:relative;），當一個元素具有相對定位時，該元素將可以設定以下五個屬性，即top、left、right、bottom、z-index，四個方向屬性設定後，可以改變元素的位置，分別是依據元素本身的四條邊去定位，但是，元素在頁面原先的地方還佔據著位置（無論是文檔層還是浮動層都可以佔據位置），z-index是層級屬性，設定後，會在z軸方向上做出層級的調整，當兩個元素重疊時，層級高的會覆蓋層級低的元素。PS：由於定位後在原先層次還佔據位置，所以一般不會使用相對定位改變元素的位置，只會用來調層級或配合絕對位置時使用。

　　絕對位置（position:absolute;），和相對定位一樣，該元素將可以設定以下五個屬性，即top、left、right、bottom、z-index，但是，除了z-index用法雷同外，剩下的四個屬性在定位時，依據有所改變。

　　我總結為以下三條：

　　第一、查看它的父元素是否有定位屬性，若有，則依據它父元素的四條邊進行定位，若沒有，參見第二條。

　　第二、查看它的父元素的父元素是否有定位屬性，若有，則依據它父元素的父元素的四條邊進行定位，若沒有，參見第三條。

　　第三、一級級向上查，若查到某父級元素有定位屬性，則依據該父級元素的四條邊進行定位，若沒有，則依據第一屏的瀏覽器四條邊進行定位。

　　PS：一般而言，需要移動位置時，都是使用絕對位置移動位置，但是往往需要父級元素添加定位屬性配合使用，至於定位屬性添加哪個值，依據頁面情況而定。

　　固定定位（position:fixed;），和上兩種相同，該元素將可以設定以下五個屬性，即top、left、right、bottom、z-index，但是，除了z-index用法雷同外，剩下的四個屬性在定位時，依據也有所改變。

　　由於固定定位後，元素將一直 在頁面我們可以看到的地區，即元素將隨著捲軸的滾動而滾動，所以固定定位的四個定位屬性在賦值後，依據的是瀏覽器的四條邊進行定位。

CSS的四大布局層級 和 HTML標籤的‘生態系統’（四）------定位層