css下position屬性詳解

標籤：html   css   

寫過CSS的人都免不了與position屬性打交道，但是要真正理解position屬性還不是一個很容易的事。前兩天博主想在一個html頁面上實現一個<div>元素重疊在另一個<div>元素上，並且位於該<div>元素的右下角的效果。在網上搜到他人的解決方案，並且也實現了，這裡面最關鍵的就是利用position屬性以及left、right、top、bottom等屬性。為了更為透徹地理解背後原理，博主在網上搜了相關的資料，總算是有了一些認識，或許也只是一知半解，不過先寫下來供大家分享。

在html中有塊元素和行元素之分。塊元素諸如div、p等，其中的子項目會按垂直方向排列，這些元素顯示為一塊內容；與之相反，span、strong等等元素被稱為行內元素，他們的內容顯示在行中，即橫向擴充。

凡是寫在HTML中的元素都會被載入到文檔流中，簡單的說文檔流就相當於一個容器，HTML中的所有元素都是按照從上到下，從左至右的順序被載入到文檔流中，然後在渲染網頁的時候，再根據文檔流中的順序將元素一個一個顯示在網頁中。所以在文檔流中的元素都是根據相對位置來進行繪製的。不過並不是所有的元素都會被放入到文檔流中，比如position為absolute、fixed等等情況時。

那麼現在就正式來講position屬性。position屬性共有4個值，分別是relative、absolute、fixed和static：

        static：這是position的預設值，static元素會出現在正常的文檔流中，並且按照磨人的規則繪製；

        relative：position為relative的元素依然會出現在文檔流中，設定為relative的元素同時是希望在正常的顯示位置的基礎上進行一些微 調。例如“left：20px”的意思就是在正常顯示位置的基礎上左邊縮排20像素；

        absolute：position為absolute的元素會從文檔流中刪除，absolute元素的繪製不再以正常位置進行顯示，而是以其第一個position不為static的父元素為定位範圍，再根據left、right等等屬性進行定位。

        fixed：position為fixed的元素的定位規則更absolute類似，只是fixed元素的定位範圍不再是父元素而是整個視窗。所以設定為fixed的元素在使用者滾動瀏覽網頁時，其相對於瀏覽器視窗的位置也不會改變。

好了，基本的定義解釋清楚了，現在就結合博主自己的實踐來談談具體的使用，博主想要實現的效果如下：

即一張圖片的右下角有一個按鈕。根據上文講解到的知識，這裡應該有兩個div元素，其中一個為另一個的父元素：

<div class="background_img" >    <img src="***" />    <div class="btn"><input type="button" /></div></div>

既然class為btn的<div>要相對於父元素定位，所以其position為absolute，同時再通過bottom和right來設定位置：

div.btn{position:absolute;right:10px;bottom:10px;}

而對於class為background_img的<div>元素來說，其position元素不能為預設的static，所以設定為relative即可：

div.background_img{position:relative;}

就這麼幾行，這個效果就實現了，各位讀者可以自己試一下。

css下position屬性詳解