相信很多同學們對於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屬性.這個也可以說是沒有布局.

position中各種布局的用法