position relative absolute 做出區域的絕對定位

在網頁上我們常看到文字、icon 等內容,加入圖片中的的設計,

例如下圖將文字主題加入照片中,使用者能夠第一眼發現圖片重點。

類似這種設計,其實我們不用依靠 photoshop,

利用 CSS 中的position 的 relative 及 absolute 屬性排版,也可以輕鬆達成!

 

那麼 position:relative 、 absolute 要如何運用,以及有什麼要點需要注意呢?

我們手來做一個類似的設計,過程中替你一一講解其中的要領,

先來看看成品吧!

想在圖片加上醒目的設計,該如何下手呢?

首先我們要思考 HTML 的架構,

範例中,黑色透明的背景範圍以  info 命名,background 則為 info 的母層。

 

為什麼要將  info 寫在 background中呢?

因為CSS 中, position:absolute 屬性的元素,會往母層尋找有 position:relative 的元素位置定位

換句話說,我們要以  background 所在的相對位置來定位,info就必須是 background 的子元素。

 

確認好 HTML 架構後,我們再來撰寫 CSS 屬性

我們先做些樣式的設計,對母層 background 設定寬、高,

接著對 img 做設定,使他貼齊父元素大小,就不會有圖片過大的情況發生,

最後再對 info 做樣式的設定,當然你們也可以依自己喜好對顏色、字體等等做調整。

剩下的工作就是替 info 及background 做區域中的絕對定位。

 

我們先替 background 加上 position:relative

 

對 info 加上 position:absolute 後,別忘了調整 info 位置完成排版設計喔!

top : 30% , info 會下移 background 高度的30%、left:0,貼齊 background 的左側,

當然若想貼齊圖片的右側位置,只要將 left:0 更改成 right:0 就能輕鬆辦到。

 

範例連結: http://codepen.io/oscar9527/pen/peNOEZ

 

利用 position 的 relative 及 absolute 處理圖片排版, 除了不用依靠 photoshop 外,

我們可以針對重點處,使用 HTML 的 a 元素產生連結的效果,比起純圖片的設計、全圖片的連結方式,

使用者可以在網頁上有更好的體驗,此外還可以進一步加上 a:hover 的屬性,達到不同的視覺效果。

 

小提醒:子元素沒有上層的相對位置時,便會以 body 元素進行定位 (整個頁面),當你發現區域中的絕對定位不對勁時,不妨檢查一下你的 HTML 架構及 position: relative 屬性。