コピペOK！画像の上に画像やテキストをのせる方法／CSS

HTMLとCSSで画像の上にオシャレに文字やアイコン、ボタンなどをのせる方法をメモします。
よく使うコードなので是非とも覚えておきたいですね！

画像の上に文字をのせる方法

手順1：まずは画像を用意します。

手順2：画像とテキストを1つのdiv要素の中にまとめる

画像と文字を1つのdivタグの中に放り込みます。
下記のサンプルコードではpタグの中に「画像の上にテキストをのせる」という文字を入れました。
pタグではなく見出しタグを使っても、spanタグを使ってもOKです。

<div class="overtext">
  <img src="◯◯.jpg" />
  <p>画像の上にテキストをのせる</p>	
</div>

手順3：positionプロパティを指定

positionというCSSのプロパティをそれぞれの要素に指定します。
親要素であるdivに対しては相対配置のposition:relativeを、
文字列の入ったpタグに対しては絶対配置のabsoluteを指定します。

.overtext {/*親要素div*/
 	position: relative;/*相対配置*/
  }
.overtext p {
	position: absolute;/*絶対配置*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
	color: #ffffff;
  }

.overtext img {
 	width: 100%;/*画面いっぱいにしたい場合は*/
  }

画像の中心に配置するため今回はposition:absoluteを
top:50%　left:50%にしました、しかしこれだけだと
文字のサイズ分中央からズレが発生してしまいます。

そこでtransform: translateというワザを使って文字分のズレを補正しています。
translate(-50%,-50%)で縦と横の文字のズレが補正されます。