ここから本文です

レスポンシブル対応にて、ヘッダのimg画像の上にh2を重ねたいのですが画面幅を縮...

アバター

ID非公開さん

2017/5/411:21:07

レスポンシブル対応にて、ヘッダのimg画像の上にh2を重ねたいのですが画面幅を縮小するとh2が下にずれてしまいます。
どのように対応したら良いでしょうか。

<header>
<img ******************>
</header>
<article>
<h2></h2>
</article>


article h2 {
position: absolute;
top: 20px;
left: 20px;
width: 100%;
}

閲覧数:
51
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

yoy********さん

2017/5/417:28:18

http://liveweave.com/Av7gUN

一応、作ってみました。

「position: absolute;」と「position: relative;」を使うことがポイントです。

  • アバター

    質問者

    ID非公開さん

    2017/5/507:13:05

    ご回答ありがとうございます。
    WPで作成しているので、h2は<article>内にある状態です。
    h2をposition: absolute;で浮かせてimg内に配置はできるのですが、レスポンシブなので画面を縮小した時にずれてしまいます。
    htmlの構造を変えるしかないのでしょうか。

  • その他の返信(5件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる