画像に文字を重ねたい
WEB制、CSSです。
画像の上に文字を重ねたいんですが、画像の下に配置されます。（重なってはいない）
どうしてですか？
0
2Answer
コードを書いてくれないとわかりません。
1Like
Comments
@ishida-kun
Questioner
確かに…浅はかでした。
結構質問してから時間が立っているので解決してるかもしれませんが
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="img-box1">
<img id="imgResult" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAA8ADwDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAj/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAQF/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlcBaygAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k=" style="width: auto;">
<div>ああ</div>
</div>
<div class="img-box2">
<img id="imgResult" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAA8ADwDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAj/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAQF/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlcBaygAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k=" style="width: auto;">
<div>ああ</div>
</div>
<style>
/* 最小構成 */
.img-box1{
position: relative;
}
.img-box1>div{
position: absolute;
top:0;
}
/* 色々使いやすく設定したもの */
.img-box2{
width: fit-content;
position: relative;
}
.img-box2>img{
vertical-align:top;
}
.img-box2>div{
position: absolute;
top:0;
}
</style>
</body>
</html>
1Like
Comments
@ishida-kun
Questioner
ありがとうございます…！帰って確認してみます！