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