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

Question

前提・実現したいこと

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

https://www.designbetter.co

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

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

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

該当のソースコード

<div class="howToContent">
  <img src="src/img/cost.jpg" alt="" class="howToContent-bgi">
  <div class="howToContent-content">
    <h3>上に被せたい文字列</h3>
    <p>上に被せたい文字列の説明</p>
  </div>
</div>

.howToContent {
    display: flex;
    justify-content: center;
    &-bgi {
        width: 500px;
        height: 300px;
    }
    &-content {
        position: absolute;
        background-color: #fff;
        top: 15%;
        left: 50%;
        padding: 30px;
    }
}

試したこと

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

Comments

[itagagaki]

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

[SKYTIME]

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

[itagagaki]

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

[SKYTIME]

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

Answer 1

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

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

一例のコードです。

.howToContent {
    display: flex;
    justify-content: center;
    align-items: center; //上下中央配置
    &-bgi {
        width: 500px;
        height: 300px;
    }
    &-content {
        background-color: pink;
        padding: 30px;
        margin-left: -250px; //250px重ねる
        min-width: 150px;
    }
}

Comments

[SKYTIME]

ありがとうございます！
可能であれば、上のコードよりも文字の要素を下にずらした状態にしたいのですが、可能でしょうか？

[hatena19]

margin-top を設定すれば下にずらすことができます。

[SKYTIME]

ありがとうございます！
希望通りのものができました！

Answer 2

ウィンドウの狭さなどに影響して勝手に動いたりしないようにするには、

overflow: hidden;

を使うとどうでしょうか。