有人住高樓,有人在深溝,有人光萬丈,有人一身鏽,code
世人萬千種,浮雲莫去求,斯人若彩虹,趕上方知有。cdn
——電影《怦然心動》blog
relative
/absolute
元素都支持 top
/right
/bottom
/left
屬性定位。ip
relative 元素是相對自身定位的;absolute 元素是相對於最近的 position
屬性值不是 static
(也就是 fixed
, absolute
, relative
或 sticky
)的祖先元素定位的。get
下面看圖說話(圖中的兩個內部元素同時設置了 left: 0
)。it
注意io
relative 元素是相對包含塊(containing block)的 content box 區域定位的;absolute 元素是相對包含塊的 padding box 區域定位的。class
爲了方便,圖中的兩個外部元素(即 static 和 relative)沒有設置
padding
值。pdf假設外部元素有
padding: 20px
的設置。當對內部兩個元素同時設置left: 0
後,效果是這樣的。lazyload再次提醒一下,爲了方便,本篇文章中兩個外部元素沒有設置 padding 值。
下面同時給內部(即有紅色邊框的)元素設置相同的 top
/right
/bottom
/left
百分比值查看效果。
第一個:元素相對原來的位置(虛線矩形框)向左偏移半個包含塊寬度(準確說是 content box width/2 的距離)。
第二個:元素定位在距離包含塊左邊緣 50% 的距離,這個 50% 就是半個包含塊寬度(準確說是 padding box width/2 的距離)。
啊哈,如今能看出區別了吧。
relative 元素是相對自身向右偏移 50% 距離的;absolute 則表示元素距離包含塊右邊緣 50% 的距離。
下面是設置 right: 100%
的狀況。
再來看看 bottom: 100%
的狀況。
本篇文章使用的例子代碼在這裏查看。
感謝你花費寶貴的時間閱讀這篇文章。
若是你以爲這篇文章讓你的生活美好了一點點,歡迎給我鮮(diǎn)花(zàn)或鼓(diǎn)勵(zàn)😀。若是能在文章下面留下你寶貴的評論或意見是再合適不過的了,由於研究證實,參與討論比單純閱讀更能讓人對知識印象深入,假期愉快😉~。
(完)