資訊專(zhuān)欄INFORMATION COLUMN
摘要：經(jīng)常做頁(yè)面渲染的筒子可能會(huì)遇到的一個(gè)問(wèn)題，的相對(duì)定位和絕對(duì)定位。網(wǎng)上流傳著一個(gè)說(shuō)法，叫子絕父相。就是說(shuō)子元素設(shè)置絕對(duì)定位，父元素設(shè)置相對(duì)定位。也就是相對(duì)定位是相對(duì)于本身的位置進(jìn)行偏移。而不是盲目的去套那些子絕父相什么的。
孔子說(shuō)：“溫故而知新，可以為師矣?！边@幾天參加了一個(gè)免費(fèi)的前端課，每天晚上都有直播，講解一個(gè)獨(dú)立的案例。在聽(tīng)前端基礎(chǔ)的時(shí)候，發(fā)現(xiàn)自己有不少東西沒(méi)學(xué)會(huì)，平時(shí)在學(xué)校雖說(shuō)html也寫(xiě)了不少，但有好大一部分都被忽略掉了。就在剛才看了一個(gè)基礎(chǔ)案例，很是有共鳴，一個(gè)簡(jiǎn)單的輪播圖，牽扯到的東西實(shí)在是多。不得不說(shuō)，專(zhuān)業(yè)的就是專(zhuān)業(yè)的。
好了，廢話(huà)不多說(shuō)，直接上干貨。經(jīng)常做頁(yè)面渲染的筒子可能會(huì)遇到的一個(gè)問(wèn)題，position的相對(duì)定位和絕對(duì)定位。這個(gè)問(wèn)題看似很簡(jiǎn)單，不就是一個(gè)定位嘛，有什么的？別急，我們慢慢往下看。網(wǎng)上流傳著一個(gè)說(shuō)法，叫子絕父相。就是說(shuō)子元素設(shè)置絕對(duì)定位，父元素設(shè)置相對(duì)定位。然后就可以給子元素設(shè)定top,left值來(lái)控制位置。這其實(shí)是一種很錯(cuò)誤的觀念，完全曲解了定義。樓主之前在學(xué)校寫(xiě)頁(yè)面的時(shí)候也犯過(guò)類(lèi)似的錯(cuò)誤，只要實(shí)現(xiàn)了效果就行，管他什么原理呢，結(jié)果每次碰到定位的問(wèn)題都卡殼。查半天還記不住，為了徹底搞懂這個(gè)，特地花時(shí)間寫(xiě)了這篇帖子。
relative也就是相對(duì)定位：是相對(duì)于本身的位置進(jìn)行偏移。只看自己，不看其他。
absolute絕對(duì)定位：相對(duì)于非static的祖先元素進(jìn)行位置偏移，當(dāng)這樣的元素不存在，則相對(duì)于根級(jí)容器定位。
以一個(gè)輪播圖為例，html代碼：
class="banner">class="banner-bg"> <！--E banner-->CSS代碼：
banner是banner-bg的父級(jí)，然后給banner設(shè)置一個(gè)position：absolute屬性。按照規(guī)則absolute要找他的非static祖先元素，我們?yōu)榱俗宐anner-bg這幾個(gè)輪播圖都固定在最上面，所以就要給輪播容器banner添加一個(gè)position：relative屬性。這樣設(shè)定left：0；top：0；就會(huì)定位到banner了。雖然不設(shè)定banner的relative屬性也能將圖片放到頂部，但那樣的話(huà)，banner-bg找的是根級(jí)元素html，這并不是我們想要的效果。為了以后不出現(xiàn)差錯(cuò)，還是給想要定位的元素添加一個(gè)position：relative屬性。
說(shuō)了這么多，其實(shí)absolute定位的時(shí)候，就看你想要定位到哪個(gè)父級(jí)元素，就給哪個(gè)元素添加relative屬性。而不是盲目的去套那些子絕父相什么的。搞懂原理才是正解。希望能幫到需要的人，花了一下午整理，就怕有些定義搞不太懂，編輯博客也是一個(gè)學(xué)習(xí)的過(guò)程，本著對(duì)他人負(fù)責(zé)的態(tài)度，寫(xiě)出來(lái)的東西一定要確認(rèn)無(wú)誤后才敢發(fā)表。有不足之處歡迎指出。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1888.html
相關(guān)文章
移動(dòng)端頁(yè)面頭部固定定位的絕對(duì)定位實(shí)現(xiàn)
摘要：在移動(dòng)端進(jìn)行開(kāi)發(fā)時(shí)，通常整個(gè)頁(yè)面的頭部會(huì)固定一個(gè)區(qū)域，比如下圖淘寶中的頭部。其中的默認(rèn)定位都是。因此最終的代碼形式是禁用滾動(dòng)條，實(shí)現(xiàn)相對(duì)于的絕對(duì)定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相對(duì)于進(jìn)行定位的。 在移動(dòng)端進(jìn)行開(kāi)發(fā)時(shí)，通常整個(gè)頁(yè)面的頭部會(huì)固定一個(gè)區(qū)域，比如下圖淘寶中的頭部。這個(gè)區(qū)域無(wú)論怎么劃屏都是可見(jiàn)的。在PC端，我們可以使用position:fixed來(lái)實(shí)現(xiàn)。...
移動(dòng)端頁(yè)面頭部固定定位的絕對(duì)定位實(shí)現(xiàn)
摘要：在移動(dòng)端進(jìn)行開(kāi)發(fā)時(shí)，通常整個(gè)頁(yè)面的頭部會(huì)固定一個(gè)區(qū)域，比如下圖淘寶中的頭部。其中的默認(rèn)定位都是。因此最終的代碼形式是禁用滾動(dòng)條，實(shí)現(xiàn)相對(duì)于的絕對(duì)定位代替固定定位。因此如果有元素找不到非的祖先元素，那么是相對(duì)于進(jìn)行定位的。 在移動(dòng)端進(jìn)行開(kāi)發(fā)時(shí)，通常整個(gè)頁(yè)面的頭部會(huì)固定一個(gè)區(qū)域，比如下圖淘寶中的頭部。這個(gè)區(qū)域無(wú)論怎么劃屏都是可見(jiàn)的。在PC端，我們可以使用position:fixed來(lái)實(shí)現(xiàn)。...
解析什么是絕對(duì)定位，相對(duì)定位與浮動(dòng)
摘要：注意，絕對(duì)定位使元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來(lái)不存在一樣。相對(duì)定位相對(duì)定位，元素相對(duì)于它自己原來(lái)的位置進(jìn)行移動(dòng)。在理解定位之前，先說(shuō)一個(gè)概念，文檔普通流，就是元素標(biāo)簽正常在HTML里的順序，塊級(jí)元素從上至下排列，行內(nèi)元素從左到右排列。 絕對(duì)定位 絕對(duì)定位：absolute，元素相對(duì)于離它最近的已定位祖先元素進(jìn)行移動(dòng)，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最...
CSS進(jìn)階——絕對(duì)定位元素的寬高是如何定義的
摘要：絕對(duì)定位元素的布局計(jì)算公式表示內(nèi)容寬度，即標(biāo)準(zhǔn)盒子模型默認(rèn)值是默認(rèn)值是以水平方向從左至右為例說(shuō)明一下絕對(duì)定位元素的位置或大小是如何定義的。 先拋兩個(gè)小問(wèn)題： 絕對(duì)定位相對(duì)于誰(shuí)來(lái)定位？ 大多數(shù)人都知道是相對(duì)于最近的position設(shè)置為relative/absolute/fixed的父元素來(lái)定位。那如果所有父元素的position都沒(méi)有設(shè)置上面三個(gè)值，那又是相對(duì)誰(shuí)來(lái)定位呢？ 包...
發(fā)表評(píng)論
0條評(píng)論
閱讀 3245·2021-11-19 09:40
閱讀 3704·2021-11-16 11:52
閱讀 3039·2021-11-11 16:55
閱讀 3244·2019-08-30 15:55
閱讀 1246·2019-08-30 13:08
閱讀 1723·2019-08-29 17:03
閱讀 3085·2019-08-29 16:19
閱讀 2636·2019-08-29 13:43
