css的position

TRBL屬性(TOP、RIGHT、BOTTOM、LEFT)只有當設定了position屬性纔有效。 
當設定position:absolute 
如果父級(無限)沒有設定position屬性,那麼當前的absolute則結合TRBL屬性以瀏覽器左上角爲原始點進行定位 
如果父級(無限)設定position屬性,那麼當前的absolute則結合TRBL屬性以父級(最近)的左上角爲原始點進行定位。 

當設定position: relative 
則參照父級(最近)的內容區的左上角爲原始點結合TRBL屬性進行定位(或者說相對於被定位元素在父級內容區中的上一個元素進行偏移),無父級則以BODY的左上角爲原始點。相對定位是不能層疊的。在使用相對定位時,無論元素是否進行移動,元素依然佔據原來的空間。因此,移動元素會導致它覆蓋其他框。 

一般來講,網頁居中的話用Absolute就容易出錯,因爲網頁一直是隨着分辨率的大小自動適應的,而Absolute則會以瀏覽器的左上角爲原始點,不會應爲分辨率的變化而變化位置。有時還需要依靠z-index來設定容器的上下關係,數值越大越在最上面,數值範圍是自然數。當然有一點要注意,父子關係是無法用z-index來設定上下關係的,一定是子級在上父級在下。 

設置此屬性值爲 relative 會保持對象在正常的HTML流中,但是它的位置可以根據它的前一個對象進行偏移。在相對(relative)定位對象之後的文本或對象佔有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的,在絕對(absolute)定位對象之後的文本或對象在被定位對象被拖離正常文檔流之前會佔有它的自然空間。放置絕對(absolute)定位對象在可視區域之外會導致滾動條出現。而放置相對(relative)定位對象在可視區域之外,滾動條不會出現。其實對於定位的主要問題是要記住每個定位的意義。相對定位是“相對於“元素在文檔流中初始位置的,而絕對定位是”相對於“最近的已經定位的祖先元素。

來源:http://www.jb51.net/article/16461.htm

發佈了26 篇原創文章 · 獲贊 71 · 訪問量 85萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章