每天CSS學習之top/left/right/bottom

標籤：多少   osi   absolute   bottom   注意   pos   使用   沒有   像素   

top：範圍是數值或百分比，正負都可以。該值表示 距離頂部有多少像素。例如top:10px；即距離頂部10個像素。

left/right/bottom與top如出一轍，只是方向不一樣而已。

這些屬性一般配合position一起使用。只有當position的值為relative、absolute或fixed時才有效。

注意：position為relative時，標籤是基於文檔流的；當position為absolute時，標籤會脫離文檔流。fixed和absolute一樣。

1、不管父元素或祖先元素有沒有設定position屬性值，當前標籤的position為relative時，且給left和top屬性賦值後，該標籤會基於直接父元素的左上方計算，不會脫離文檔流，如果該標籤前面有元素，則該標籤會向下移動；

2、如果某個標籤的很多祖先元素設定了position為relative/absolute/fixed，再給當前標籤的position設定absolute，給left和top屬性賦值後，那就基於 離得最近的設定了position的那個祖先元素 的左上方計算；

如果祖先元素都沒有設定position值，則該標籤就會基於整個螢幕的左上方進行計算。

3、針對position是fixed的標籤來說，始終是基於整個螢幕來計算的。

每天CSS學習之top/left/right/bottom