relative 和 absolute 元素的百分比定位

有人住高樓,有人在深溝,有人光萬丈,有人一身鏽,code

世人萬千種,浮雲莫去求,斯人若彩虹,趕上方知有。cdn

——電影《怦然心動》blog

relative/absolute 元素都支持 top/right/bottom/left 屬性定位。ip

relative 元素是相對自身定位的;absolute 元素是相對於最近的 position 屬性值不是 static(也就是 fixed, absolute, relativesticky)的祖先元素定位的。get

下面看圖說話(圖中的兩個內部元素同時設置了 left: 0)。it

零、left: 0

注意io

relative 元素是相對包含塊(containing block)的 content box 區域定位的;absolute 元素是相對包含塊的 padding box 區域定位的。class

爲了方便,圖中的兩個外部元素(即 static 和 relative)沒有設置 padding 值。pdf

假設外部元素有 padding: 20px 的設置。當對內部兩個元素同時設置 left: 0 後,效果是這樣的。lazyload

再次提醒一下,爲了方便,本篇文章中兩個外部元素沒有設置 padding 值。

下面同時給內部(即有紅色邊框的)元素設置相同的 top/right/bottom/left 百分比值查看效果。

1、left: 50%


效果看起來是同樣的,元素向左偏移了半個包含塊的寬度,但本質是:

第一個:元素相對原來的位置(虛線矩形框)向左偏移半個包含塊寬度(準確說是 content box width/2 的距離)。
第二個:元素定位在距離包含塊左邊緣 50% 的距離,這個 50% 就是半個包含塊寬度(準確說是 padding box width/2 的距離)。

2、top: 50%


與上面同理。

3、right: 50%/right: 100%

啊哈,如今能看出區別了吧。

relative 元素是相對自身向右偏移 50% 距離的;absolute 則表示元素距離包含塊右邊緣 50% 的距離。

下面是設置 right: 100% 的狀況。

4、bottom: 50%/bottom: 100%

再來看看 bottom: 100% 的狀況。

本篇文章使用的例子代碼在這裏查看

貢獻指北

感謝你花費寶貴的時間閱讀這篇文章。

若是你以爲這篇文章讓你的生活美好了一點點,歡迎給我鮮(diǎn)花(zàn)或鼓(diǎn)勵(zàn)😀。若是能在文章下面留下你寶貴的評論或意見是再合適不過的了,由於研究證實,參與討論比單純閱讀更能讓人對知識印象深入,假期愉快😉~。

(完)

相關文章