使用position定位有四種方式，分別為absolute、relative、static、fixed，static是靜態定位，也為系統自動定位。下面主要分析其他三種定位方式的特點。

　　1. 絕對定位：position:absolute

　　(1) 絕對定位是將元素依據已經定位(絕對、固定或相對定位)的離他最近的祖先元素進行定位，祖先元素沒有定位或沒有祖先元素則默認依據body瀏覽器窗口定位。

　　(2) 絕對定位的元素不論本身是什么類型，定位后都將成為一個新的塊級元素，如果未指定寬高度默認自適應實際包含的內容區域(不在默認瀏覽器寬度)。

　　(3) 絕對定位后的元素將處于賦予其他元素之上，自身不占位置，他原來在正常文檔流中所占的空間同時被關閉，就是說絕對定位的元素不占據頁面空間，原空間被后續元素使用。

　　絕對定位必須用left、right、top、bottom屬性之一激活，用于指定元素左、右、上、下外邊距距離已定位祖先元素(或瀏覽器)左、右、上、下內邊框的距離。

　　如果定義多個屬性，當left、right、沖突時以left為準，當top、bottom沖突時以top為準，如果一個也不指定則元素扔按普通文檔流布局，但他自己不再占據空間，后續元素上移與其重疊。

　　絕對定位元素定位后相對祖先元素的位置不在變化，若頁面內容較多拖動頁面滾動時，定位元素會隨頁面一起滾動。

　　絕對定位元素重疊覆蓋其他元素時可用z-index屬性設置他們的疊放次序。

　　2. 相對定位：position:relative

　　(1) 相對定位是讓元素(可以是行內元素)相對于它在正常文檔流原位置按left、right、top、和bottom偏移量移動到新位置。

　　(2) 相對定位的元素移動后保持原外觀樣式大小，移動定位后不會占據新空間會覆蓋新位置原有元素，原位置空間被保留，其他元素相對他原來的位置不變。

　　(3) Left、right、top、和bottom指定相對原位置移動的偏移量，可以使用帶單位數值、相對父元素的百分比%。

　　Left正值：左邊向內—向右移動，負值：左邊向外—向左。

　　right正值：右邊向內—向左移動，負值：右邊向外—向右。

　　top正值：上邊向內—向下移動，負值：上邊向外—向上。

　　bottom正值：下邊向內—向上移動，負值：下邊向外—向下。

　　3. 固定定位：position:fixed

　　固定定位與絕對定位absolute相似，定位后元素也生成為新塊級盒框、覆蓋新位置原有元素，在正常文檔流中所占的原空間關閉被后續元素使用。

　　固定定位與絕對定位absolute的區別是定位的元素無論父元素是否定位都會直接在瀏覽器窗口中定位，不會隨滾動條拖動頁面而滾動，固定定位用left、right、top、bottom指定瀏覽器左、右、上、下各邊向中心的偏移量作為定位元素外邊距位置

　　總結：元素的定位模型中需要區分每個屬性值的不同定位方式，分為絕對定位、相對定位、固定定位以及默認定位和繼承父元素。其中絕對定位和固定定位都脫離原本的文檔流，而相對定位則遵循原本的文檔流。設置元素的定位方式后，還需要指定偏移量。可以從上、右、下、左四個方向進行偏移。并且可以利用Z-index屬性設置元素之間的層疊順序。

　　本文章由千鋒成都web前端培訓學員總結分享，學習web前端，可以參考千鋒提供的web前端學習路線，該學習路線對從零基礎小白到web前端初級開發工程師，web前端高級開發工程師，后面的web前端大神級開發工程師都有一個明確清晰的指導，根據千鋒提供的web前端學習路線圖可以讓你對學習web前端開發需要掌握的知識有個清晰的了解，并快速入門web前端開發。

上一篇

千鋒成都web前端培訓學員分享：解析左右滑動輪播圖

下一篇

成都python培訓分享Python培訓班哪個好