teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問CSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい

編集履歴

質問編集履歴

4

文法の修正

2020/09/18 09:58

投稿

mmmmtsr
mmmmtsr

スコア11

test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,8 @@
56
56
 
57
57
  ```CSS
58
58
 
59
+
60
+
59
61
  .coment_pict{
60
62
 
61
63
  position: relative;
@@ -238,4 +240,146 @@
238
240
 
239
241
  }
240
242
 
243
+
244
+
245
+
246
+
247
+
248
+
249
+ .second-contents_wrap{
250
+
251
+ background-color: #F0F0E1;
252
+
253
+ }
254
+
255
+
256
+
257
+
258
+
259
+
260
+
261
+ .voice-student_2ndblock{
262
+
263
+ margin-top: 20px;
264
+
265
+
266
+
267
+ }
268
+
269
+
270
+
271
+ @media only screen and (min-width: 1024px){
272
+
273
+ .voice-student_2ndblock{
274
+
275
+ max-width: 1600px;
276
+
277
+ margin: 50px auto;
278
+
279
+ padding-left: 50px;
280
+
281
+ padding-right: 50px;
282
+
283
+ display: -webkit-flex;
284
+
285
+ display: flex;
286
+
287
+ justify-content: space-between;
288
+
289
+ }
290
+
291
+
292
+
293
+ }
294
+
295
+ .voice-student_2ndblock-comment{
296
+
297
+ padding: 20px;
298
+
299
+ }
300
+
301
+
302
+
303
+ .voice-student_2ndblock-comment p{
304
+
305
+ padding-top: 20px;
306
+
307
+ }
308
+
309
+
310
+
311
+
312
+
313
+ @media only screen and (min-width: 1024px){
314
+
315
+ .voice-student_2ndblock-comment{
316
+
317
+ padding: 30px 30px 30px 60px;
318
+
319
+ margin-bottom: 0px;
320
+
321
+ -webkit-box-flex: 0;
322
+
323
+ -ms-flex: 0 0 65.828%;
324
+
325
+ flex: 0 0 65.828%;
326
+
327
+ max-width: 65.828%;
328
+
329
+ }
330
+
331
+ }
332
+
333
+ .voice-student_2ndblock-img{
334
+
335
+ padding-top: 20px;
336
+
337
+ padding-left: 20px;
338
+
339
+ padding-right: 20px;
340
+
341
+
342
+
343
+
344
+
345
+ }
346
+
347
+ @media only screen and (min-width: 1024px){
348
+
349
+ .voice-student_2ndblock-img{
350
+
351
+ margin-bottom: 0px;
352
+
353
+ -webkit-box-flex: 0;
354
+
355
+ -ms-flex: 0 0 28.828%;
356
+
357
+ flex: 0 0 28.828%;
358
+
359
+ max-width: 28.828%;
360
+
361
+ padding:0;
362
+
363
+
364
+
365
+ }
366
+
367
+ }
368
+
369
+
370
+
371
+
372
+
373
+ .voice-student_2ndblock-img img{
374
+
375
+
376
+
377
+ height: 310px;
378
+
379
+ object-fit: cover;
380
+
381
+
382
+
383
+ }
384
+
241
385
  ```

3

誤字修正

2020/09/18 09:58

投稿

mmmmtsr
mmmmtsr

スコア11

test CHANGED
@@ -1 +1 @@
1
- ぶCSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
1
+ CSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
test CHANGED
File without changes

2

誤字修正

2020/09/18 09:54

投稿

mmmmtsr
mmmmtsr

スコア11

test CHANGED
@@ -1 +1 @@
1
- CSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
1
+ ぶCSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
14
14
 
15
- 赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても左右上下に動いてしまいます。
15
+ 赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても図のように左右上下に動いてしまいます。
16
16
 
17
17
  親要素にはrelativeを子要素にはabsoluteを入れています。
18
18
 

1

文章をもっとわかりやすくしました

2020/09/18 09:51

投稿

mmmmtsr
mmmmtsr

スコア11

test CHANGED
@@ -1 +1 @@
1
- レスポンシブ対応。position:absoluteで指定した重なった画像が動いてしまう
1
+ CSS　レスポンシブ対応。position:absolute指定で重ねた画像を固定したい
test CHANGED
@@ -10,13 +10,17 @@
10
10
 
11
11
 
12
12
 
13
- 図のように黄色い画像(pict_photo)の右上に赤い画像(pict_photo08)を重ねます。
13
+ 図のように黄色画像(pict_photo)の右上に赤画像(pict_photo08)を重ねます。
14
14
 
15
15
  赤い画像はできるだけ動かしたくないのですがウィンドウの可変時にどうしても左右上下に動いてしまいます。
16
16
 
17
17
  親要素にはrelativeを子要素にはabsoluteを入れています。
18
18
 
19
+ できればウインドウがどんなに可変しても黄色画像(pict_photo)の右上に赤画像(pict_photo08)を
20
+
21
+ 固定したいのですが方法が思いつきません。
22
+
19
- それでも動いてしまうので、メディアクエリを入れてるのですがめちゃくちゃ細かくなってしました。
23
+ 行った対策はメディアクエリを入れてるのですがめちゃくちゃ細かくなってしました。
20
24
 
21
25
  何か別の方法があるのでは。と思っております。
22
26