画像の上に文字を配置したい

Question

IMG_1248.JPGの上に、<p>Illustrated by<br>テストテスト</p>を表示したく、以下のコードを記述しましたが反映されません。
divの中に文字をimgとpをいれているのですが、記述ミスがあればご指摘をお願いいたします。

<div class="yam_container_7">
<img src="img/IMG_1248.JPG" alt="テストテスト">
<p>Illustrated by<br>テストテスト</p>
<script>
ScrollReveal().reveal('.yam_container_7', { 
  duration: 1600, 
  origin: 'left', 
  distance: '50px',
  reset: true
});
</script>
</div>

.yam_container_7{
width:100%;
position: relative;
}

.yam_container_7 img{
width:100%;
}

.yam_container_7 p{
text-align: center;
position: absolute;
color: red;
}

よろしくお願いします。

Answer 1

position: absolute;を指定したときは、top, bottom, left, right の各プロパティで位置を指定しないと、元の位置のままです。

もし、左上から各々100pxkの位置に表示したいのなら、

.yam_container_7 p{
  position: absolute;
  top: 100px;
  left: 100px;
}

というような具合です。

もし、上下左右の中央なら、下記のように設定します。

.yam_container_7 p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Comments

[21120903ryosuke]

解決しました！ありがとうございます！