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