html相對定位絕對位置

標籤：遇到   結果   .com   發表   自己   技術   inf   設定   圖片   

　　孔子說：“溫故而知新，可以為師矣。”這幾天參加了一個免費的前端課，每天晚上都有直播，講解一個獨立的案例。在聽前端基礎的時候，發現自己有不少東西沒學會，平時在學校雖說html也寫了不少，但有好大一部分都被忽略掉了。就在剛才看了一個基礎案例，很是有共鳴，一個簡單的輪播圖，牽扯到的東西實在是多。不得不說，專業的就是專業的。

　　好了，廢話不多說，直接上乾貨。經常做頁面渲染的筒子可能會遇到的一個問題，position的相對定位和絕對位置。這個問題看似很簡單，不就是一個定位嘛，有什麼的？別急，我們慢慢往下看。網上流傳著一個說法，叫子絕父相。就是說子項目設定絕對位置，父元素設定相對定位。然後就可以給子項目設定top,left值來控制位置。這其實是一種很錯誤的觀念，完全曲解了定義。樓主之前在學校寫頁面的時候也犯過類似的錯誤，只要實現了效果就行，管他什麼原理呢，結果每次碰到定位的問題都卡殼。查半天還記不住，為了徹底搞懂這個，特地花時間寫了這篇文章。

　　relative也就是相對定位：是相對於本身的位置進行位移。只看自己，不看其他。

　　absolute絕對位置：相對於非static的祖先元素進行位置位移，當這樣的元素不存在，則相對於根級容器定位。

　　以一個輪播圖為例，html代碼：

<div class="banner"><!--S banner-->    <div class="banner-bg">        <img src="images/1.jpg">    </div>    <div class="banner-bg">        <img src="images/2.jpg">    </div>    <div class="banner-bg">        <img src="images/3.jpg">    </div></div>
<div class="nav"><!--導覽按鈕，注意這裡用的是<i>標籤-->
　　<i></i>

　　<i></i>

　　<i></i>

</div><！--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屬性。而不是盲目的去套那些子絕父相什麼的。搞懂原理才是正解。希望能幫到需要的人，花了一下午整理，就怕有些定義搞不太懂，編輯部落格也是一個學習的過程，本著對他人負責的態度，寫出來的東西一定要確認無誤後才敢發表。有不足之處歡迎指出。

html相對定位絕對位置