2枚の画像を重ね合わせたいです

priceクラス（コードの後半にあります）の中の2枚の画像を重ね合わせようとしています。
display:blockを与えた上下に並んだ2つのimgを20px分重なるようにしたいです。
ネガティブマージンやpositionなどのやり方を試しました。

1.ネガティブマージン
片方のimgにネガティブマージンを与えても全く反応がありませんでした。

2.position
親要素にposition:relativeを与え、一方のimgにposition:absoluteを与えたところ、
親要素を飛び出し、centerの位置からもずれた左のほうに行ってしまいました。

この場合、どのようなコードが適切なのでしょうか？

※コードが長くてすみません。
むやみに消すとコードに関係するかもしれないと思い、そのまま貼っております。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <title>FLOWER</title>
7  <link rel="stylesheet" href="../css/styles.css">
8  </head>
9  <body>
10    <header>
11     <div class="logo"> </div>
12       <div class="tagline">かわいいが届くお花便</div>
13       <div class="content">
14         <div class="download_pc">
15          <div class="container">
16            <a href="https://apps.apple.com/jp/app/id1434272434"><div class="badge_appstore"></div></a>
17            <a href="https://play.google.com/store/apps/details?id=co.rollcake.flower"><div class="badge_googleplaystore"></div></a>
18          </div>
19         </div>
20          <div class="footnote">
21           <p>*北海道、沖縄、離島エリアは現在対象外です</p>
22         </div>
23       </div>
24    </header>
25    <main>
26      <div class="first">
27        <div class="container white">
28          <div class="info info1">
29            
30              <h2>
31                
32                届くのは
33                
34                <br>
35                あなた好みのお花だけ
36              </h2>
37           
38              <p>FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。</p>
39        
40          </div>
41          <div class="info info2">
42          
43              <h2>
44                お花はポストに投函
45                <br>
46                忙しくても大丈夫
47              </h2>
48           
49              <p>お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。</p>
50  
51          </div>
52          <div class="info info3">
53  
54              <h2>
55                FLOWERなら<br>
56                いつもかわいく飾れる
57              </h2>
58                            
59              <p>専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
60          </div>
61        </div>
62      </div>
63      <section class="price">
64        <div class="price-container">
65          <h2>
66            お部屋に飾りやすいサイズの
67            <br>
68            ブーケを気軽に
69          </h2>
70          <div class="pic">
71            <img class="free" src="../img/price_trial-1cb962fe9ca0f2bba59816774992f8ad29266c147ebb7c7afc854367b482a700.png" alt="初回お試し無料">
72            <img class="hand-flower" src="../img/price_bouquetimg-9d58e59120ae586337c3b91a2f531ad14e7b05dc3d3ec63ab0ee68b41c8852fb.png" alt="花の写真">
73          </div>
74          <p>お花とグリーン5～7本のブーケ</p>
75          <h3>800円<span>/1回</span></h3>
76          <ul>
77            <li>送料別途360円</li>
78            <li>価格は税別です</li>
79          </ul>
80        </div>
81      </section>
82    </main>
83    <footer>
84
85    </footer>
86      <div class="download_sp">
87        <div class="container">
88          <a href="https://apps.apple.com/jp/app/id1434272434"><div class="badge_appstore"></div></a>
89          <a href="https://play.google.com/store/apps/details?id=co.rollcake.flower"><div class="badge_googleplaystore"></div></a>
90        </div>
91       </div>
92    </div>
93  </body>
94</html>

CSS
1html{
2  font-size:62.5%;
3  height: 100%;
4  line-height: 1.15;
5}
6
7*, *:before, *:after {
8  -webkit-box-sizing: border-box;
9  box-sizing: border-box
10}
11
12
13body{
14  height: 100%;
15  margin: 0;
16  padding:0;
17  overflow-x: hidden;
18  min-width: 320px;
19  letter-spacing:0.05rem;
20  line-height:1.6;
21  font-size: 14px;
22  color: #3f434a;
23  font-family: "Noto Sans JP", sans-serif;
24}
25
26header{
27  background-image:url(../img/small.jpg) ;
28  background-size: cover;
29  background-position:center center;
30  box-sizing: border-box;
31  display: block;
32  font-family: "Noto Sans JP", sans-serif;
33  height:100vh;
34  min-height: 660px;
35  text-align: center;
36  color: aliceblue;
37  padding-top:48px;
38  position: relative;
39  text-size-adjust:100%;
40 }
41
42.tagline{
43   font-size: 21px;
44   color: #fff;
45   margin: 16px 6vmin 24px;
46   animation:move 2s ease 0.2s 1 normal;
47   box-sizing: inherit;
48}
49.logo{
50    background-image: url(../img/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png);
51    background-size: contain;
52    background-repeat: no-repeat;
53    background-position: center;
54    height: 116px;
55    width: 131px;
56    margin: 0 auto 16px;
57    margin-top: 5vh;
58    animation:move 2s ease 0.2s 1 normal;
59    box-sizing: inherit;
60 }
61
62 @keyframes move{
63  0%{
64    opacity: 0;
65    transform:translate(0,15px);
66  }
67  100%{
68    opacity: 1;
69  }
70}
71
72 .content{
73   margin: 0 auto;
74   text-align: center;
75   padding-top: 260px;
76   position: absolute;
77   bottom:24px;
78   right: 0;
79   left: 0;
80   animation:move 2s ease 0.2s 1 normal;
81   box-sizing: inherit;
82 }
83.download_pc{
84  padding: 24px 16px;
85  height: 97px;
86  display: none;
87  box-sizing: inherit;
88}
89
90.container{
91  display: flex;
92  flex-direction: row;
93  justify-content: center;
94  box-sizing: inherit;
95}
96
97a{
98  color: #4183c4;
99  text-decoration: none;
100  box-sizing: inherit;
101}
102
103.badge_appstore{
104  width: 164px;
105  height: 49px;
106  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/Badge_Appstore-9f3fcecf66049829e600e6a1299fa1671b7c66c829f4a2a34ffd43ce946a71d7.png) ;
107  background-size: cover;
108  margin: 0 auto;
109  margin-right: 16px;
110}
111.badge_googleplaystore{
112  width: 164px;
113  height: 49px;
114  background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/Badge_Googleplaystore-8a4acc6f065bfdaafb2029998f0a464d0ac4571b2b89210218c71e1ae4c8078a.png) ;
115  background-size: cover;
116  margin: 0 auto;
117 }
118.footnote{
119  margin:24px auto;
120  box-sizing: inherit;
121  }
122
123  .footnote p{
124    margin-bottom: 4px;
125  }
126
127  main{
128    text-align: center;
129  }
130  .first{
131    color: ivory;
132    text-align: start;
133  }
134  
135  @media screen and (max-width:766px){
136  .first .container{
137    display: flex;
138    flex-wrap: wrap;
139  }
140}
141  .info{
142  padding: 8vmin 6vmin;
143  background-position: center bottom;
144  background-size: cover;
145  background-repeat: no-repeat;
146  min-height: 540px;
147  flex-grow: 1;
148  flex-basis: 100vw;
149}
150
151h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
152  margin-top: 0;
153}
154
155.info h2{
156  font-size: 2.2rem;
157  letter-spacing:0.05rem;
158  font-weight: normal;
159  line-height: 1.6;
160}
161
162.info1{
163  background-image: url(../img/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg);
164}
165.info2{
166  background-image: url(../img/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg);
167}
168  .info3{
169    background-image: url(../img/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg);
170  }
171  
172  .info p{
173    font-size: 1.5rem;
174    text-align:justify;
175    line-height: 1.6;
176  }
177  
178  p:last-child {
179    margin-bottom: 0;
180  }
181
182  .price{
183    background-color: rgb(245,245,245);
184  
185  }
186
187  .price-container{
188    padding: 16vmin 6vmin 20vmin;
189  }
190  .price img{
191    display: block;
192    margin: 0 auto;
193    width: 225px;
194  }
195
196  .price .free{
197    width: 140px;
198  }
199
200  .price h2{
201    font-weight: normal;
202  }
203
204  .pic{
205    margin: 0 auto;
206    position: relative;
207    background-color:lightcoral;
208    width: 225px;
209    }
210
211  .hand-flower{
212    position: absolute;
213    bottom: 15px; 
214  }
215  
216  .price ul{
217    list-style-type:"*";
218    list-style-position: inside;
219    margin-top: 30px;
220  }
221  
222  .download_sp{
223    display: none;
224    height: 97px;
225    padding: 24px 16px;
226    background-color: ivory;
227    width: 100%;
228    position: fixed;
229    bottom: 0;
230    opacity: 0.9;
231    z-index: 100;
232    box-shadow: 0 -2px 12px 0 rgba(0,0,0,0.08);
233    backdrop-filter: blur(8px);
234   }
235

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

回答1件

ベストアンサー

こんにちは。

2つのimgを20px分重なるようにしたい

.free は 25092 の画像ですが、CSSでwidth:140pxとなっているので、高さが 92140/250=51.52px となっています。
それに従って、.price も同じ高さになっていますから、51.52-20=31.52px 下端から上に動かせば、ちょうど20px分重なる計算です。

css
1  .hand-flower{
2    position: absolute;
3    bottom: calc( 92px * 140 / 250 - 20px ); 
4  }

投稿2021/01/09 01:44

Lhankor_Mhy

総合スコア36928

actlikeJohnnys

2021/01/09 06:53

bottomからの距離をそのような計算式で導くべきだったのですね。非常にためになりました。ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

2枚の画像を重ね合わせたいです

関連した質問