画像が重なっていまう

このように画面の上に写真が乗っかってしまいます
price-imageというクラスのこの丸の中の画像を重ならないように下に表示するにはどうすれば良いのでしょうか

やってみたこと

divの数がしっかり合っているか
プロゲートの上級編をクリアしているのでもう一度それを参考にして見返した

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mosh1.css">
    <title>mosha1-flower</title>
</head>
<body>
    <header>
        <div class="logo"></div>
        <div class="tagline">
            かわいいが届くお花便
        </div>
        <div class="download-wrapper">
          <div class="download-item">
            <div class="container">
            <a class="download for-ios" href="https://flowr.page.link/88Lt">App Store</a>
            <a class="download for-andoroid" href="https://flowr.page.link/19mT">Google Play</a>
            <p>* 北海道、沖縄、離島エリアは現在対象外です</p>
            </div>
          
          </div>
        </div>
    </header>
    

    <section class="service">
      <div class="service2">
        
        <div class="item item1">
          <h2>届くのは<br>あなたの好みのお花だけ</h2>
          <p>
            FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。
          </p>
        </div>

        <div class="item item2">
         <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
         <p>
          お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。
         </p>  
        </div>
        
        <div class="item item3">
          <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
          <p>
            専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。
          </p>
        </div>

      </div>
    </section>

    <section class="price">
      <div class="container">
        <div class="item-price">
         <div class="heading">
          <h2>お部屋に飾りやすいサイズの<br>ブーケをワンコインで</h2>
         </div>
         <div class="price-image">
            <img src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_bouquetimg-9d58e59120ae586337c3b91a2f531ad14e7b05dc3d3ec63ab0ee68b41c8852fb.png">
         </div>
        </div>
      </div>
    </section>
    
</body>
</html>

header 
{
  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg);
  height:100vh;
  background-size: cover;
  padding-top: 48px;
  background-position: center;
  position: relative;
}



.body {
    font-size:14px;
}

.logo {
   background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png);
   margin: 0 auto 16px;
   width: 131px;
   height: 116px;
   background-repeat: no-repeat;
   background-size:contain;
   background-position: center;
   margin-top:5vh;

}

.tagline {
     color:white;
     text-align: center;
     

}

.download-wrapper {
    padding-top:24px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom:24px;
    left:0px;
    right: 0px;
}

.download-item {
    padding:24px 16px;

}



.download {
    display: inline;
    background-color: black;
    border-radius: 3px;
    padding: 20px 29px;
    color:white

}

.download.for-ios {
    margin-right: 10px;
}

.download-wrapper p {
    color:white;
    padding-top:100px;
}


body, h2, h3, h4, p {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.6;
    letter-spacing: 0.05rem;
}

.service {
    height: 10px;
    
}


.service2{
    display: flex;
}


.item {
    color: white;
    width:calc(100%/3);
    
    
}

.item1 {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg);
    background-size:cover;
    padding: 8vmin 6vmin;
    background-position:center bottom;
    min-height: 540px;
    line-height: 1.6;
}


.item2 {
    background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg);
    padding:8vmin 6vmin;
    background-position: center bottom;
    background-size:cover;
    min-height: 540px;

    
}

.item3 {
    background-image:url("https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg");
    padding:8vmin 6vmin;
    min-height:540px;
    background-size:cover;
    background-position:center bottom;
}


.price {
    min-height:578px;
    padding:16vmin 6vmin 20vmin;
    background: #f5f5f5;
}

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

回答1件

こんばんは。

これを消してみてはいかがでしょうか。

css
1.service {
2	/* height: 10px; */
3}

投稿2020/09/23 08:08

Lhankor_Mhy

総合スコア36074

退会済みユーザー

2020/09/23 08:20

回答ありがとうございます解決できたもののなぜそうなるのかよく分かりません。 sectionタグで全て囲まれているのになぜそこが<section class="service">に影響するのでしょうか

Lhankor_Mhy

2020/09/23 08:35

overflow: visible の時、内部要素の高さが親要素の高さを超える場合、親要素の高さは変わらずに、はみ出ます。ですので、.service2がどれほどの高さがあっても、.serviceの高さは10pxのままです。

Lhankor_Mhy

2020/09/23 08:49

これがわかりやすいかもしれません。 ……と言っても、未翻訳部分が多いのですが。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像が重なっていまう

やってみたこと

関連した質問