position中各類佈局的用法

　　相信不少同窗們對於CSS裏面的position不是特別的熟悉,有時候就算換了position的值可能頁面也沒有什麼變化,今天我就來具體的講解一下position中absolute,fixed,relative,static,sticky這五種佈局的用法與不一樣之處.

　　1.absolute(絕對佈局):絕對佈局顧名思義就是絕對於"網頁頁面"的佈局.這個頁面就是指網頁從開始一直到網頁尾部爲止的頁面.舉一個栗子,好比我打開一個瀏覽器以下圖1,它的頁面尾部爲圖2所示,那麼這個網頁頁面就是從圖1到圖2爲止所顯示的頁面,在這個佈局裏面top的值就是指距離這個頁面的開頭的值,button,left,right與其相似.使用絕對佈局的一個好處就是不會影響到其餘元素的佈局.

圖一:  　　　　　　　　　　　　　　　　　　圖二:

　　2.relative(相對佈局):相對佈局相對的是其父佈局的一種佈局.什麼是父佈局?見圖3,每一行顯示的字都是出於居中的狀態,若是在relative(相對佈局)下使用left:30px這行代碼,那麼這個顯示的元素將會距離本來顯示的地方30px(如圖4處在其它元素的右邊).若是使用的是absolute(絕對佈局),那麼第二個元素因爲不會影響其它元素將會在距離左邊緣30px顯示(如圖5處在其它元素左邊,注意在使用絕對佈局的時候不要只設定一個方向的屬性,否則會出現圖5的這種高度不肯定的狀況).

圖3:　圖4:　圖5:

　　3.fixed(固定佈局):固定於顯示窗口的佈局.舉一個簡單而又容易看到的例子,就拿某度搜索了一下牙科來開刀,前面的4個搜索連接所有都是牙醫的廣告,點擊其中一個廣告的網站看看,會發現以下圖所示的界面,在網站的左邊有個免費電話諮詢的顯示元素,不管你的界面拉到哪裏,反正這個顯示元素就一直在左側固定位置顯示不會變化,這個就是固定在了你頁面的顯示窗口.

 　　　　　　　　　　　　　　　　　　　　

　　4.sticky(粘性佈局):sticky是一個頗有意思的佈局,日常網站也比較少遇到,在屏幕範圍時該元素的位置並不受到定位影響(設置是top、left等屬性無效),當該元素的位置將要移出偏移範圍時,定位又會變成fixed,根據設置的left、top等屬性成fixed(固定佈局)的效果.

 

　　5.static(靜止的):static(靜止的)是position的默認值,元素處於正常的文檔流中,會忽略left、top、right、bottom和z-index屬性.這個也能夠說是沒有佈局.