画像と文字を表示する
今回はclass名を box としました。
box classの中に、表示させたい画像と文字を入れます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>画像の上に文字を重ねる方法</title>
</head>
<body>
<div class="box">
<img src="./img/dog.png">
<p>Hello!</p>
</div>
</body>
</html>
CSSで画像の上に文字を重ねる
以下を追記します。
absoluteは、親要素を基準に、絶対的な位置を決めるので、top: 0; left: 0; を指定すると、文字は box classの左上に配置されます。
例えば、top: 50px; left: 100px; とすれば、文字は box classの上から50px、左から100pxの位置に配置されます。
CSS
.box {
position: relative;
}
.box p {
position: absolute;
top: 0;
left: 0;
}