使用position定位有四種方式，分別為absolute、relative、static、fixed，static是靜態(tài)定位，也為系統(tǒng)自動(dòng)定位。下面主要分析其他三種定位方式的特點(diǎn)。

　　1. 絕對(duì)定位：position:absolute

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

　　(2) 絕對(duì)定位的元素不論本身是什么類型，定位后都將成為一個(gè)新的塊級(jí)元素，如果未指定寬高度默認(rèn)自適應(yīng)實(shí)際包含的內(nèi)容區(qū)域(不在默認(rèn)瀏覽器寬度)。

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

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

　　如果定義多個(gè)屬性，當(dāng)left、right、沖突時(shí)以left為準(zhǔn)，當(dāng)top、bottom沖突時(shí)以top為準(zhǔn)，如果一個(gè)也不指定則元素扔按普通文檔流布局，但他自己不再占據(jù)空間，后續(xù)元素上移與其重疊。

　　絕對(duì)定位元素定位后相對(duì)祖先元素的位置不在變化，若頁面內(nèi)容較多拖動(dòng)頁面滾動(dòng)時(shí)，定位元素會(huì)隨頁面一起滾動(dòng)。

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

　　2. 相對(duì)定位：position:relative

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

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

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

　　Left正值：左邊向內(nèi)—向右移動(dòng)，負(fù)值：左邊向外—向左。

　　right正值：右邊向內(nèi)—向左移動(dòng)，負(fù)值：右邊向外—向右。

　　top正值：上邊向內(nèi)—向下移動(dòng)，負(fù)值：上邊向外—向上。

　　bottom正值：下邊向內(nèi)—向上移動(dòng)，負(fù)值：下邊向外—向下。

　　3. 固定定位：position:fixed

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

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

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

　　本文章由千鋒成都web前端培訓(xùn)學(xué)員總結(jié)分享，學(xué)習(xí)web前端，可以參考千鋒提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。

上一篇

千鋒成都web前端培訓(xùn)學(xué)員分享：解析左右滑動(dòng)輪播圖

下一篇

成都python培訓(xùn)分享Python培訓(xùn)班哪個(gè)好