Jumbotron レスポンシブ対応の画像の上にテキストを配置したい

Question

Bootstrapを使わずに、こちらの上にposition:relative;を使うことも試しましたが、画像に合わせて文字も位置を変えるということが実現できませんでした。
→こちら解決致しました。本当にありがとうございます。

<div class="header">
    <div class="box">
      <img src="###.png">
      <h1>ああああああああああ</h1>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </div></div>

.box {position:relative;}
.box h1 {position:absolute;
         top:50%;}
.box p {position:absolute;
         top:50%;}

```a

Comments

[aKusano]

最終的にどう表示したいのかと、今どういう状況なのかを、キャプチャか図版でビジュアルで示してもらえるともう少し分かりやすいんですが可能ですか？

[hellohello]

aKusano 様　目を通して頂きありがとうございました。せっかくお声がけ頂きましたのに、大変遅くなり申し訳ございません…。画像を追加致しました。

Answer 1

これで合ってるかな？

<div class="box">
  <img>
  <div class="box-inner">
    <div><h1></h1><p></p></div>
  </div>
</div>

.box {
  position:relative;
}
.box img {
  z-index:1;
  width:100%;
  height:auto;
}
.box-inner {
  z-index:10;
  position:absolute;
  left:0;
  top:0;
  display:flex;
  justify-content:center;
  align-content:center;
  align-items:center;
  width:100%;
  height:100%;
}
.box-inner div h1 {}
.box-inner div p {}

Comments

[hellohello]

LibertyBell３様　ご回答頂きありがとうございます！！！せっかく回答頂きましたのにお礼が遅れてしまい大変申し訳ありません。動作を確認致し、自分のものに反映させたところできました！！！！z-indexでimgを低く配置し、テキストを上に配置すれば良いのですね！！！私は同じboxの中にimgを入れてしまっていたので上手くいかなかったのですね！！！やっと理解が出来ました。本当にありがとうございました。改めましてお礼が遅れてしまったことをお詫び申し上げます　m( T T )m