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

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

position img（position relative）

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

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

那麼 position：relative 、 absolute 要如何運用，以及有什麼要點需要注意呢？

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

先來看看成品吧！

position relative 說明圖 1

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

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

<div class="background">
  <img src="https://www.utaso.com/P9A6246.jpg" alt="photo">
  <a class="info" href="#">
    <h2 class="title">Traveling<br>in Japan</h2>
    <p class="date">August 2017</p>
  </a>
</div>

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

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

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

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

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

.background{
   width: 650px;
}

img{
   width: 100%;
   height: auto;
}

.info
{
   display: inline-block;
   padding: 30px 50px 0 30px;
   background: rgba(0,0,0,.4);
   color: #fff;
   text-align: center;
   text-decoration: none;
 }

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

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

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

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

.background{
  position: relative;
  width: 800px;
}

我們先替 background 加上 position：relative。

.info
{
  position: absolute;
  top: 30%;
  left: 0;
  display: inline-block;
  padding: 30px 50px 0 30px;
  background: rgba(0,0,0,.4);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

對 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 屬性。