HTML.CSS imgとpタグが重なってしまう

Question

親要素の外（真下）に画像が入ってしまい
さらに下に入れたいテキストがかぶってしまいます。
1画面だけですと対応できるのですが、レスポンシブで表示させたいたいとなると解決策が見つかりません…
教えてくださると幸いです。

<main class="wrapper">
          <div class="img-wrap">
          <img src="img/top_img01.jpg">
          <img src="img/top_img02.jpg">
          <img src="img/top_img03.jpg">
        </div>
        <div class="concept">
          <div class="text scroll-fade">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
　　　　　　<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
　　　　　　<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </main>

.img-wrap {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2.2em;
}
.img-wrap img {
  position: absolute;
}
.concept {
  display: flex;
  justify-content: center;
  margin-top: 1em;
}
.text {
  line-height: 2.5;
  font-size: 0.9em;
  font-family: serif;
  color: #696969;
}


@media screen and (min-width: 481px) {
  .top_logo {
    padding: 5%;
  }
  .top_logo-inner {
    width: 7em;
  }
  .img-wrap {
    margin-top: 2.6em;
  }
  .img-wrap img {
    width: 63%;
    object-fit: contain;
  }
  .text {
    width: 35%;
  }
}

@media screen and (max-width: 480px) {
  .img-wrap {
    margin-top: 15%;
  }
  .footer-bottom-img {
    width: 3em;
  }
  .top_logo-inner {
    width: 5em;
  }
  .img-wrap img {
    width: 90%;
    object-fit: contain;
  }
  .text {
    width: 55%;
  }
}

$(function(){
  $('.img-wrap img:nth-child(n+2)').hide();
  setInterval(function() {
    $(".img-wrap img:first-child").fadeOut(4000);
    $(".img-wrap img:nth-child(2)").fadeIn(4000);
    $(".img-wrap img:first-child").appendTo(".img-wrap");
  }, 4000);
});

Comments

[yambejp]

イメージが伝わってこないので
現状と希望する結果を図示できませんか？

[t_m]

、画面サイズを拡大したりするとtextがimgにかぶってしまっている状態です。
開発者ツールで確認したところ<div class="img-wrap">の子要素である<img>が<div class="img-wrap">の中に入っていませんでした…。

理想としましては<div class="img-wrap">と<div class="img-wrap">を上下で表示させたいと思っております。

Answer 1

重なる原因は、img要素を絶対配置しているからです。
下記のCSSを削除すれば重なることはなくなります。

.img-wrap img {
  position: absolute;
}

追記

画像を定期的に切り替えたいということでしょうか。
そのためimg要素を重ねるために絶対配置しているということですかね。

だとしたら、絶対配置にすると親要素(.img-wrap)の高さが0になりますので、
親要素(.img-wrap)の高さを適正に設定する必要がありますね。

下記は padding-top で高さを設定している例です。
（画像の縦横比に応じて修正してください。コードは1:1の場合です。）

.img-wrap img {
  position: absolute;
  top:0; /* 追加 */
}
@media screen and (min-width: 481px) {
 
 .img-wrap {
    margin-top: 2.6em;
    padding-top: 63%;  /* 追加 */
  }
  .img-wrap img {
    width: 63%;
    object-fit: contain;
  }
  
}
@media screen and (max-width: 480px) {
  .img-wrap {
    margin-top: 15%;
    padding-top: 90%;  /* 追加 */
  }
 
  .img-wrap img {
    width: 90%;
    object-fit: contain;
  }
}

Comments

[t_m]

無事解決しました！ありがとうございます。