CSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい

不明：CSS
レスポンシブ対応

図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても図のように左右上下に動いてしまいます。
親要素にはrelativeを子要素にはabsoluteを入れています。
できればウインドウがどんなに可変しても黄色画像(pict_photo)の右上に赤画像(pict_photo08)を
固定したいのですが方法が思いつきません。
行った対策はメディアクエリを入れてるのですがめちゃくちゃ細かくなってしました。
何か別の方法があるのでは。と思っております。
ご教示お願いいたします。

HTML
1<section class="second-contents_wrap"><!--TeachertComment-->
2<p class="coment_pict"> <img src="img/pict_photo08.png"></p>
3<div class="voice-student_2ndblock">
4<p class="voice-student_2ndblock-img"><img src="img/pict_photo.jpg"></p>
5<div class="voice-student_2ndblock-comment"><h3 class="txt-catch">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</h3>
6  <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<br /><br />
7  ああああああああああああああああああああああああああああああああああああ</p>
8  </div>
9</div>
10</section>

CSS
1
2.coment_pict{
3  position: relative;
4}
5
6
7
8
9  .coment_pict img{
10    width: 100px;
11    position: absolute;
12    left: 190px;
13    bottom: -50px;
14  }
15
16
17  @media screen and (min-width:501px) and ( max-width:665px) {
18    .coment_pict img{
19      left: 240px;
20      bottom: -50px;
21      width: 130px;
22    }
23  }
24
25
26
27
28  @media screen and (min-width:666px) and ( max-width:844px) {
29    .coment_pict img{
30      left: 340px;
31      bottom: -50px;
32      width: 130px;
33    }
34  }
35
36
37
38
39  @media screen and (min-width:845px) and ( max-width:1024px) {
40    .coment_pict img{
41      left: 200px;
42      bottom: -50px;
43      width: 130px;
44    }
45  }
46
47  
48
49  @media screen and (min-width:1024px) and ( max-width:1182px) {
50    .coment_pict img{
51      left: 240px;
52      bottom: -70px;
53      width: 130px;
54    }
55  }
56
57
58
59  @media screen and (min-width:1083px) and ( max-width:1189px) {
60    .coment_pict img{
61      left: 270px;
62      bottom: -70px;
63      width: 130px;
64    }
65  }
66  
67
68
69  @media screen and (min-width:1190px) and ( max-width:1316px) {
70    .coment_pict img{
71      left: 300px;
72      bottom: -70px;
73      width: 130px;
74    }
75  }
76  
77
78  @media screen and (min-width:1317px) and ( max-width:1889px) {
79  .coment_pict img{
80    left: 320px;
81    bottom: -80px;
82    width: 130px;
83  }
84}
85
86@media only screen and (min-width: 1900px){
87  .coment_pict img{
88    left: 540px;
89    bottom: -60px;
90    width: 130px;
91  }
92}
93
94
95
96.second-contents_wrap{
97  background-color: #F0F0E1;
98}
99
100
101
102.voice-student_2ndblock{
103  margin-top: 20px;
104  
105}
106
107@media only screen and (min-width: 1024px){
108  .voice-student_2ndblock{
109    max-width: 1600px;
110  margin: 50px auto;
111  padding-left: 50px;
112  padding-right: 50px;
113    display: -webkit-flex;
114    display: flex;
115    justify-content: space-between; 
116  }
117
118}
119.voice-student_2ndblock-comment{
120  padding: 20px;
121}
122
123.voice-student_2ndblock-comment p{
124  padding-top: 20px;
125}
126
127
128@media only screen and (min-width: 1024px){
129  .voice-student_2ndblock-comment{
130  padding: 30px 30px 30px 60px;
131  margin-bottom: 0px;
132  -webkit-box-flex: 0;
133  -ms-flex: 0 0 65.828%;
134  flex: 0 0 65.828%;
135  max-width: 65.828%;
136}
137}
138.voice-student_2ndblock-img{
139  padding-top: 20px;
140  padding-left: 20px;
141  padding-right: 20px;
142
143
144}
145@media only screen and (min-width: 1024px){
146  .voice-student_2ndblock-img{
147    margin-bottom: 0px;
148    -webkit-box-flex: 0;
149    -ms-flex: 0 0 28.828%;
150    flex: 0 0 28.828%;
151    max-width: 28.828%;
152    padding:0;
153
154  }
155  }
156
157
158  .voice-student_2ndblock-img img{
159
160    height: 310px;
161    object-fit: cover;
162
163  }

Lhankor_Mhy

2020/09/18 09:53

問題を再現するには、ご提示いただいていない部分のCSSが必要な気がします。ご提示のコードでサンプルを作りましたが…… https://jsfiddle.net/Lhankor_Mhy/as0nvreL/

mmmmtsr

2020/09/18 09:59

ご指摘ありがとうございます。お恥ずかしい限りですがCSSもぐちゃぐちゃでございます。何卒、よろしくお願い申し上げます。

Lhankor_Mhy

2020/09/18 10:14

ありがとうございます。 HTMLは変更してもいいのですか？

mmmmtsr

2020/09/18 11:04

はい。大丈夫です！

hatena19

2020/09/18 14:51

メディアクエリで1024pxを境に2カラムと1カラムの切り替えをしてますが、1カラムのときのご希望のレイアウトの画像も提示してください。また、現状のCSSだと .voice-student_2ndblock-img img に高さのみ指定して幅を設定してないので、親要素からはみ出て、テキストブロックと重なってますが、それは想定の状態ですか。画像では重なってませんが。あと、２つの画像のそれぞれのサイズも提示してください。

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

回答1件

ベストアンサー

質問のCSSではメディアクエリで1024pxを境に2カラムと1カラムの切り替えをしてますが、1カラムのときのレイアウトが不明なので、とりあえず2カラムの時だけについて回答します。

黄色画像(pict_photo)を基準にした絶対位置に赤画像(pict_photo08)を配置したいのですから、
２つの画像は同じブロックに入れましょう。そうしないと、今回のように細かく調整する必要が出てきます。
下記のようなHTMLになります。

html
1<section class="second-contents_wrap">
2  <div class="voice-student_2ndblock">
3    <p class="voice-student_2ndblock-img">
4      <img src="pict_photo.jpeg">
5      <img src="pict_photo08.png" class="coment_pict">
6    </p>
7    <div class="voice-student_2ndblock-comment">
8      <h3 class="txt-catch">タイトルタイトルタイトルタイトルタイトルタイトルタイトル</h3>
9      <p>あああああああああああああああああああああああああああああああああああああああああああ</p>
10    </div>
11  </div>
12</section>

その上で画像の親要素を基準にして、赤色画像を絶体位置指定で配置すれば、サイズ変更しても、黄色画像に対して常に同じ位置に配置されます。

css
1.voice-student_2ndblock-img {
2  position: relative; /* これを基準にする */
3}
4
5.voice-student_2ndblock-img img {
6  width: 100%;
7  height: 310px;
8  object-fit: cover;
9}
10
11img.coment_pict {
12  width: 100px;
13  height: 100px;
14  position: absolute;
15  /* 基準の右上から自身のサイズの半分だけ移動 */
16  top: -50px;
17  right: -50px;
18}