這篇文章主要介紹了CSS相對(duì)與絕對(duì)定位實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS相對(duì)與絕對(duì)定位實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁(yè)美工、網(wǎng)站程序員、網(wǎng)頁(yè)設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷(xiāo)人員及形象策劃。承接：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開(kāi)發(fā),以高性?xún)r(jià)比制作企業(yè)網(wǎng)站、行業(yè)門(mén)戶(hù)平臺(tái)等全方位的服務(wù)。

1.絕對(duì)定位和浮動(dòng)元素是近親：都具備包裹性和破壞性

包裹性：包裹性換種說(shuō)法就是讓元素inline-block化，例如一個(gè)div標(biāo)簽?zāi)J(rèn)寬度是100%顯示的，但是一旦被absolute屬性纏上，則100%默認(rèn)寬度就會(huì)變成自適應(yīng)內(nèi)部元素的寬度

破壞性：浮動(dòng)的破壞性在于切斷l(xiāng)inebox鏈，致使高度塌陷，但由于浮動(dòng)元素仍在凡間（DOMtree），實(shí)體是看得見(jiàn)摸得著的，所以其占據(jù)的實(shí)體位置還是在的。而absolute絕對(duì)定位不僅讓高度塌陷，又由于從未深入凡間，在凡間沒(méi)有他的實(shí)體位置，所以寬度也是塌陷的

2.position:absolute的濫用

首先自己是個(gè)流體布局控，絕對(duì)定位這種東西，顯然沒(méi)有流動(dòng)的氣質(zhì)，尤其拿來(lái)定位后（雖然有時(shí)候在relative的庇護(hù)下也有一定的流動(dòng)性）。流動(dòng)性布局很強(qiáng)調(diào)不定寬，不定高，活用標(biāo)簽自身屬性，順其自然，最少干預(yù)。但是由于absolute屬性（尤其是帶有l(wèi)eft/top值）的破壞性，會(huì)導(dǎo)致高寬塌陷，于是，不得已，需要設(shè)定一個(gè)高度值（或是足以撐開(kāi)高度的值），例如新浪微博導(dǎo)航就是絕對(duì)定位，于是，導(dǎo)航外標(biāo)簽必須定高，否則，下面的元素會(huì)上來(lái)發(fā)生重疊

3.常見(jiàn)absolute布局的替代實(shí)現(xiàn)方案

我們極易先入為主地認(rèn)為absolute的價(jià)值就是借助left/top屬性來(lái)進(jìn)行定位的。說(shuō)句不嚴(yán)謹(jǐn)?shù)脑?huà)，目前估計(jì)超過(guò)90%的普通布局中的absolute屬性都是用在定位上了。恩，這個(gè)回頭再說(shuō)，這里還是看看一些常見(jiàn)的absolute布局如何通過(guò)使用其他屬性完成同樣的布局效果。既然absolute屬性是拿來(lái)定位，我們只要使用其他屬性定位就可以了。此時(shí)，自然而然想到了CSS中另外一個(gè)更加低調(diào)全能的定位屬性margin，下面的前兩個(gè)例子都是使用margin代替absolute及相關(guān)屬性。

首先拿京東商城首頁(yè)的一個(gè)標(biāo)價(jià)樣式舉例，見(jiàn)下截圖：

用小bug一看其code實(shí)現(xiàn)，果然是絕對(duì)定位+定位屬性

要是我來(lái)實(shí)現(xiàn)，就不會(huì)使用absolute屬性，會(huì)使用margin實(shí)現(xiàn)擴(kuò)展性容錯(cuò)性更強(qiáng)的布局

因?yàn)閮r(jià)格是一個(gè)占據(jù)整行的div且位置和手機(jī)的位置在水平方向上始終是一樣的，所以只要設(shè)定固定的margin就能保證不論是改變父容器寬度或者定位方式都可以很好的展現(xiàn)，同時(shí)將標(biāo)價(jià)外面的div標(biāo)簽改為inline水平元素的標(biāo)簽方便inline-block化(行內(nèi)元素設(shè)置了position屬性或float屬性后屬性默認(rèn)變成inline-block，所以可以設(shè)置寬高，span是行內(nèi)元素，不設(shè)display=”block”或“inline-block”是沒(méi)辦法設(shè)寬高的)

4.absolute可以一個(gè)人戰(zhàn)斗

我們需要意識(shí)到，一個(gè)應(yīng)用的position:absolute的元素，其實(shí)就只是個(gè)非常普通的元素，我感覺(jué)與應(yīng)用了float:left的差異僅僅在于寬度的缺失

點(diǎn)擊示意的按鈕后，可以發(fā)現(xiàn)圖片還是那個(gè)圖片，還在那個(gè)位置，還是那么的安靜與優(yōu)雅。唯一變化的就是文字們有的跑到它的下面了（寬度缺失）

由此可見(jiàn)，absolute屬性只是個(gè)很普通的屬性，跟float:left是個(gè)近親。一個(gè)是隕落凡間的惡魔，一個(gè)是天空中的惡魔。所以，很多時(shí)候，我們?cè)谄胀ú季种惺褂玫絘bsolute時(shí)候，只要單單設(shè)置一個(gè)position:absolute就可以了，至于left/top之類(lèi)的都是浮云，涉及到定位什么的就把該元素當(dāng)作普通元素，使用margin進(jìn)行定位，一樣有著刮目的表現(xiàn)的

關(guān)于“CSS相對(duì)與絕對(duì)定位實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS相對(duì)與絕對(duì)定位實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。