position:absoluteの要素が移動＆消える（画像あり）

Question

Airbnbの模写コーディングを行っているものです。　
position:absoluteの要素が移動＆消えるてしまいます。
（下記cssコード内でが①header上部で移動し、②が要素ごと消えてしまいます）
ググっても解決しなく原因がわからない為、わかる方ご教授願います。

【スキル】
HTML、CSS、Bootstrap

・目標画像

・現状画像

・header付近の画像

HTML------------------------

<div class="box150"> <img src="img/画像-8.jpg" alt="" loading="lazy"> <h1>収益化してみますか？</h1> <button type="button" class="btn">はじめる</button> </div>

css-------------------------
.box150 img {
position: relative;
/* overflow: hidden; */
width: 1280px;
height: 450px;
margin-top: 100px;
margin-left: 80px;
margin-bottom: 100px;
}
①---------------------------
.box150 h1 {
position: absolute;
top: 200px;
}
②---------------------------
.box150 .btn {
position: absolute;
top: 150px;
font-size: 16px;
font-weight: bold;
}

Answer 1

position:absolute;は親要素をさかのぼっていて最初のposition: relative;のある要素を基準とします。
もし、さかのぼっていってない場合はbody要素が基準となります。そのためあらぬ位置に行ってしまっているのでしょう。

現状のCSSでは.box150 img に position: relative;がありますが、これは親要素ではなく兄弟要素なので基準にはなりません。

① と② の共通の親である .box150 に position: relative; を設定すればいいでしょう。

.box150 {
  position: relative;
}
.box150 img {
/*  position: relative; 削除 */
  overflow: hidden;

/* 以下略 */ 

}

Comments

[satoshi4365]

回答頂いた通り実施した結果問題なくできました。
ありがとうございます。