画像と要素をずらして重ねたい

前提・実現したいこと

ホームページ作成の中で、画像と要素を重ね、要素には文字を入れており、それを少しずらして表示したいと思っています。
写真の右下にその説明が被さるイメージです。

https://www.designbetter.co

このトップページみたいな感じにしたいと思っています。

現在はpositionやdispley flexなどで、要素をずらして表示させることは可能だったのですが、すぐ下にフッターがあるのですが、ブラウザの画面を狭めたり、スマートフォンでみた場合、フッターの上に文字が被さってしまいます。

親要素のマージンなどの設定も変えてみたのですが、うまくいきませんでした。
ご教示いただけますようお願いいたします。

該当のソースコード

HTML
1<div class="howToContent">
2  <img src="src/img/cost.jpg" alt="" class="howToContent-bgi">
3  <div class="howToContent-content">
4    <h3>上に被せたい文字列</h3>
5    <p>上に被せたい文字列の説明</p>
6  </div>
7</div>

SCSS
1.howToContent {
2    display: flex;
3    justify-content: center;
4    &-bgi {
5        width: 500px;
6        height: 300px;
7    }
8    &-content {
9        position: absolute;
10        background-color: #fff;
11        top: 15%;
12        left: 50%;
13        padding: 30px;
14    }
15}

試したこと

上記以外にも写真をdiv要素のbackground-imageにしたりしてみましたが、同じ状況です。

itagagaki

2021/04/29 15:26

> 画面の幅を狭めると、次の要素の上にかかってきてしまいます。私にはこの意味がわからなかったので、もう少し詳しく説明してもらえますか？（ここで答えるのではなく質問を編集してください）

SKYTIME

2021/04/29 15:53

編集させていただきました。よろしくお願いいたします。

itagagaki

2021/04/29 16:04

うーん、「画面の幅を狭めると」というのが、どういう状況なのか、どうもわからないんですよね。。。

SKYTIME

2021/04/29 16:26

わかりづらくすみません。。。変更させていただきましたが、ウインドウを狭めたり、スマートフォンでみた場合ということになります。

行動規範の内容に同意します

回答2件

ベストアンサー

display: flex;で横並びさせているようですか、
子要素をposition: absolute;で絶対配置したら flex の設定が無意味になってしまいます。

display: flex;を活かすなら、絶対配置はやめてネガティブマージンで重ねるようにすればどうでしょう。

一例のコードです。

scss
1.howToContent {
2    display: flex;
3    justify-content: center;
4    align-items: center; //上下中央配置
5    &-bgi {
6        width: 500px;
7        height: 300px;
8    }
9    &-content {
10        background-color: pink;
11        padding: 30px;
12        margin-left: -250px; //250px重ねる
13        min-width: 150px;
14    }
15}