解讀position定位

標籤：

position 屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會產生一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對於它在正常流中的預設位置位移。通常有以下四種屬性Relative、Absolute、Fixed、Static。

取值

　　Static

　　　　　　預設值。無特殊定位，對象遵循HTML定位規則（忽略 top, bottom, left, right 或者 z-index 聲明）。

　　Absolute

　　　　　　將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置。如果不存在這樣的父物件，則依據 body對象。而其層疊通過z-index屬性定義

　　Fixed

　　　　　　未支援。對象定位遵從絕對(absolute)方式。但是要遵守一些規範

　　Relative

　　　　　　對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中位移位置

　　屬性分析

　　Relative

　　我們可以這樣理解，如果不設定relative屬性，sub1的位置按照正常的文檔流，它應該處於某個位置。但當設定sub1為的position為relative後，將根據top，right，bottom，left的值按照它理應所在的位置進行位移，relative的“相對的”意思也正體現於此。置此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據它的前一個對象進行位移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視地區之外會導致捲軸出現。而放置相對(relative)定位對象在可視地區之外，捲軸不會出現。

　　Absolute

　　這個屬性總是有人給出誤導。說當position屬性設為absolute後，總是按照瀏覽器視窗來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。

要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，並且設定此屬性值為 absolute 。否則上述屬性會使用他們的預設值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞。

 　　Fixed

　　fixed是特殊的absolute，即fixed總是以body為定位對象的，常用的屬性有以下幾個 left 、 right 、 top 、 bottom按照瀏覽器的視窗進行定位。

　　Static

　　position的預設值，一般不設定position屬性時，會按照正常的文檔流進行排列。

解讀position定位