レスポンシブサイトのpositionを使用したレイアウトが崩れます

Question

レスポンシブサイトを制作しているのですが、画面幅を縮めた時に、右の<div class="news_title_wrap">と左の<div class="info_wrap">が被ってしまいます。
画面幅を縮めても、右の要素と左の要素が被らないようにするには、どのようにすれば良いのでしょうか？

---追記---

基本的な配置は出来ているのですが、Google検証ツールで徐々に画面幅を縮めていくと、スマホ(768px以下)に切り替わる前(1148pxくらい)で<div class="news_title_wrap">の上に<div class="info_wrap">が重なってしまいます。
1148pxはPCの画面サイズかと思いますので、重なるのは何か間違っているのではないかと思い質問させて頂きました。

メディアクエリを細かく設定すれば重ならずにすみそうですが、あまり細かく設定するのもおかしいと思っています。
それでは、よろしくお願いいたします。

<section class="news">
            <div class="news_title_wrap">
                <div class="news_title_inner">
                    <h2 class="din text_upper news_title">News</h2>
                    <img src="./img/read_more.png" class="read_more_ico" alt="">
                </div>
                <img src="./img/sp_line_up.png" class="line_news pcNone" alt="線">
            </div>
            
            <div class="info_wrap">
                <div>
                <span class="din info text_upper">Infomation</span>
                <img src="./img/news_info_bg.png" class="info_bg" alt="">
                </div>
                
                <div>
                <span class="din info text_upper">Infomation</span>
                <img src="./img/news_info_bg.png" class="info_bg" alt="">
                </div>
                
                <div>
                <span class="din info text_upper">Infomation</span>
                <img src="./img/news_info_bg.png" class="info_bg03" alt="">
                </div>
            </div>
        </section>

.news{
    position: relative;
    width: 90%;
    height: 370px;
    background-image: url("../img/news_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 64px auto;
    margin-bottom: 0;
}
.news_title_wrap{
    position: absolute;
    top: 40%;
    left: 10%;
}
.news_title{
    display: flex;
    justify-content: center;   
    align-items: center;
    font-size: 38px;
    letter-spacing: 1.2rem;
}
.news_title:after{
    content: "";
    border-top: 2px solid;
    width: 3rem;
    margin-left: 30px;
}
.read_more_ico{
    top: 50%;
    margin-top: 40px;
}
.info_wrap{
    position: absolute;
    top: 54%;
    right: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.info_bg{
    position:relative;
    padding-bottom: 18px;
}
.info_bg03{
    position: relative;
    padding-bottom: 0;
}
.info{    
    position: absolute;
    left:-8%;
    background-color: #dcc7a0;
    padding: 4px 20px;
    margin: 23px 0;
   z-index: 9999;
}

Comments

[Lhankor_Mhy]

> 右の<div class="news_title_wrap">と左の<div class="info_wrap">

当方でためしたところ、左右逆に表示されました。

重ねない場合のレイアウトはどのようになると想定しているのですか？　右カラムが左カラムの下に落ちるとかですか？

[torahiro]

すみません、おっしゃる通り左右逆でした。左右に配置した要素を、画面幅が狭くなっても重ならないようにしたいです。詳しくは質問に追記いたしましたので、よろしくお願いいたします。

Answer 1

.news_title_wrapと.info_wrap にそれぞれwidthを%で持たせてはいかがですか？

.news_title_wrap{
    position: absolute;
    top: 40%;
    left: 10%;
    width: 30%;
}

.info_wrap{
    position: absolute;
    top: 54%;
    right: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 70%;
}

• %の値は適時変更してください。

また、画像が長い場合これも被っちゃうので、該当するimgに

max-width: 100%;
height: auto;

をつけるのもいいかもしれません。

そもそものところで、
position: absoluteで左右に分けるのではなく、
display:flexなど使うともう少し簡単かなとは思います。

Comments

[torahiro]

ありがとうございます。widthをつけて%を調整したところ、上手く行きそうです。
display:flex、知ってはいるのですが思いつきませんでした..
flexboxでやり直してみたいと思います！

Answer 2

メディアクエリの記載を記載していただくことは可能でしょうか
レスポンシブの基本、メディアクエリの書き方

@media screen and (min-width:480px) { 
    /*　for iPhone Landscape　(iPhone 横)　*/
 
}

上記のような感じの、widthが480以下だったら、このスタイルを適用します。
というものです。

スクショを載せることが可能であればそれも確認したいです！

【備考】
横並びのレイアウトでしたらflex-boxというものを使うと便利です。
▼参考
日本語対応！CSS Flexboxのチートシートを作ったので配布します

Comments

[torahiro]

コメントありがとうございます。
質問の仕方が悪かったのですが、スマホに切り替わる前に重なってしまうのを防ぎたかったのです。
flexboxは、知ってはいたのですが思いつきませんでした...
便利なチートシート、ありがとうございます！