position:relative;とposition:absolute;が効かない・・・

Question

プログラミング超初心者です。
サイト模写をしていて下記の画像のようにテキストを画像の上に重ねたいのですが、position:relative;とposition:absolute;を使用しても重ならず、困っています。

これ以上テキストを動かすことが出来ません。

コードは以下です。

コード
```<div class="value">
            <h1>新しい価値の創造<small>Creative New Values</small></h1>
            <img src="/Users/aiai/Downloads/maccha.jpeg">
            <p>テキストテキストテキストテキスト</p>
        </div>
        <div class="science">
            <h1>科学と技術の調和<small>Science&Technology</small></h1>
            <img src="/Users/aiai/Downloads/cinnamon.jpeg">
            <p class="science1">テキストテキストテキストテキスト</p>
        </div>
        
```CSS
コード
```.value h1{
  font-family: serif;
  float: right;
  writing-mode: vertical-rl;
  margin-right: 220px;
  margin-top: 250px;
}
.value h1 small{
  padding-top:30px;
  font-size: 15px;
}
.value img {
  margin-left: 450px;
  margin-top: 350px;
  position: relative;
}
.value p {
  position: absolute;
  padding:80px;
  margin-left:150px;
  margin-bottom: 180px;
  background: rgba(230, 215, 16, 0.5);
  }

どうすればテキストが画像の上に乗るか、どなたか教えていただけませんでしょうか。

Comments

[Lhankor_Mhy]

PCのユーザーアカウント名が漏れてます。
そんなの気にしない、ということであれば失礼しました。

[yummyyummy]

具体的にどの部分から漏れていますでしょうか⁉︎

[Lhankor_Mhy]

/Users/aiai/... と書いてあるので、これがアカウント名かなと思ったのですが、違いますか？

[yummyyummy]

その部分は予め変更してあり、実際のアカウント名ではないので大丈夫かと思います！
ご指摘ありがとうございましたm(_ _)m

[Lhankor_Mhy]

なるほど、そうだったんですね。失礼しました。

Answer 1

position:relative;は親要素である.scienceに指定しないといけないので

.science {  
    position: relative;
}

後はお好みの位置に位置指定をしてやれば重なるはずです。

.science p {
  position: absolute;
  left: 150px;
  bottom: 180px;
}

Comments

[K_3578]

こういうのはそのまま「テキストを画像の上に重ねたい」とでもググれば一瞬で見つかると思うのでググる癖を付けたら良いと思います。そっちの方が圧倒的に早いので

[yummyyummy]

回答ありがとうございます！
.scienceに指定したのですが状況変わらずです・・・（ ｉ _ ｉ ）

[K_3578]

重ねたいのはどの画像ですか？

[yummyyummy]

valuクラスとscienceクラスに1枚ずつ画像があり、両方同じようにテキストを重ねたいです。

[K_3578]

了解しました。追記します。

[yummyyummy]

出来ました！！！！感動しました！！！！！
ありがとうございます！！！！！
位置の指定をleftやbottomではなく、margin-leftやmargin-bottomでひたすら調整しようとしていたことが原因でした( ；∀；)
すっきしりました！本当にありがとうございます！！！！！

[K_3578]

お役に立ったようでなにより。
わからないプロパティは積極的にMDNを見て確認する癖を付けられるといいと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/margin
ここをみればmarginがどういう作用をするのかがわかります。