画像の上に文字を配置したいのですが、上手くいきません。

Question

親要素にposition:relative;
子要素(テキスト)にposition:absolute;を指定しているのですが、画像の上に文字が配置されません、
何卒、ご教授願います。

``

HTML

    <div class="gallery">
        <img class="blackwhite" src="imges/ltpp5.png" alt="画像">
        <img class="blackwhite" src="imges/ltpp5.png" alt="画像">
        <img class="blackwhite" src="imges/ltpp5.png" alt="画像">
        <p>sunset</p>
    </div>

CSS

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

.p {
    position: absolute;
    color: rgb(151, 151, 151);
    top: 0;
    left: 0;
}

.blackwhite {
    width: 30%;
    float: left;
    padding-left: 1%;
    position: relative;
    transition: all .2s;
}

.blackwhite:hover {
    opacity: 0.6;
}

.blackwhite img {
    width: 100%;
}

Comments

[m.ts10806]

現状どうなっているのをどうしたいのでしょうか
わかる画面キャプチャや画面イメージを提示してください

Answer 1

cssの　.p｛　を　p {　にしてみてください。

Comments

[wyook]

ありがとうございます。凡ミスでした。

Answer 2

どうしてもabsoluteを使う必要がある感じでしょうか？

私なら...

<div>
  <div>sunset</div>
  <div>
    <img ～>
    <img ～>
    <img ～>
  </div>
</div>

...みたいにしますね👀

Comments

[wyook]

画像の上というのは、画像の上に重ねるという意味です。
質問が分かりにくくてもうしわけございません。