質問編集履歴

2

リンクを追加

2017/03/17 14:58

投稿

-1an.vvks-
-1an.vvks-

スコア71

test CHANGED
File without changes
test CHANGED
@@ -413,3 +413,7 @@
413
413
 
414
414
 
415
415
  どなたか原因に心当たりはないでしょうか。
416
+
417
+
418
+
419
+ [現物はこちら](http://lan.webcrow.jp/sample/20170300/thumbnail_more.html)

1

内容を詳しく書き直しました。

2017/03/17 14:58

投稿

-1an.vvks-
-1an.vvks-

スコア71

test CHANGED
@@ -1 +1 @@
1
- position:absolute;でbottom:0;した要素の挙動
1
+ position:absolute;を指定した要素の高さ計算されてしまう。
test CHANGED
@@ -1,6 +1,8 @@
1
- ###position:absolute;でbottom:0;した要素の挙動
1
+ ###position:absolute;を指定した要素の高さ計算されてしまう。
2
+
3
+
4
+
2
-
5
+ サムネイルにclick/mouseonで、画像が表示されるやつです。
3
-
4
6
 
5
7
 
6
8
 
@@ -70,8 +72,6 @@
70
72
 
71
73
  margin:2em auto;
72
74
 
73
-
74
-
75
75
  background:green;
76
76
 
77
77
  }
@@ -82,8 +82,6 @@
82
82
 
83
83
  display:block;
84
84
 
85
- border:1px solid #eee;
86
-
87
85
  width:100%;
88
86
 
89
87
  }
@@ -96,21 +94,9 @@
96
94
 
97
95
  width:30%;
98
96
 
99
- border:1px solid #555;
97
+ border:1px solid #ccc;
100
-
98
+
101
- }
99
+ }
102
-
103
- #thumb001{background:azure;}
104
-
105
- #thumb002{background:lightYellow;}
106
-
107
- #thumb003{background:pink;}
108
-
109
- #thumb004{background:red;}
110
-
111
- #thumb005{background:green;}
112
-
113
- #thumb006{background:blue;}
114
100
 
115
101
 
116
102
 
@@ -124,340 +110,306 @@
124
110
 
125
111
  opacity:0;
126
112
 
127
-
128
-
129
- border:1px solid #555;
113
+ border:1px solid #ccc;
130
114
 
131
115
  }
132
116
 
133
117
  #img000{
134
118
 
119
+ /*position:absolute;*//*この記述はいらないはず*/
120
+
121
+ /*bottom:0;*//*この記述はいらないはず*/
122
+
135
123
  opacity:1;
136
124
 
125
+ }
126
+
127
+ #img001,
128
+
129
+ #img003,
130
+
131
+ #img004,
132
+
133
+ #img005,
134
+
135
+ #img006{
136
+
137
+ position:absolute;
138
+
139
+ bottom:0;
140
+
141
+ }
142
+
143
+
144
+
145
+ #thumb001input,
146
+
147
+ #thumb002input,
148
+
149
+ #thumb003input,
150
+
151
+ #thumb004input,
152
+
153
+ #thumb005input,
154
+
155
+ #thumb006input{display:none;}
156
+
157
+
158
+
159
+ #thumb001input:checked ~ #img001,
160
+
161
+ #thumb002input:checked ~ #img002,
162
+
163
+ #thumb003input:checked ~ #img003,
164
+
165
+ #thumb004input:checked ~ #img004,
166
+
167
+ #thumb005input:checked ~ #img005,
168
+
169
+ #thumb006input:checked ~ #img006{opacity:1;z-index:100;}
170
+
171
+ #thumb001:hover ~ #img001,
172
+
173
+ #thumb002:hover ~ #img002,
174
+
175
+ #thumb003:hover ~ #img003,
176
+
177
+ #thumb004:hover ~ #img004,
178
+
179
+ #thumb005:hover ~ #img005,
180
+
181
+ #thumb006:hover ~ #img006{opacity:1;z-index:101;}
182
+
183
+
184
+
185
+ </style>
186
+
187
+ </head>
188
+
189
+
190
+
191
+ <body>
192
+
193
+
194
+
195
+ <h1>demo</h1>
196
+
197
+
198
+
199
+ <hr>
200
+
201
+ <style>
202
+
203
+ #tab01in,#tab02in{display:none;}
204
+
205
+ #tab01,#tab02{
206
+
207
+ flex: 1 1 auto;
208
+
209
+ width:45%;
210
+
211
+ color:#ccc;
212
+
213
+ font-size:20px;
214
+
215
+ text-align:center;
216
+
217
+ padding:1em;
218
+
219
+ margin-right:1px;
220
+
221
+ background:#eee;
222
+
223
+ transition:0.1s;
224
+
225
+ }
226
+
227
+ #tab02{margin:0;}
228
+
229
+
230
+
231
+ #tab_cont1,
232
+
233
+ #tab_cont2{
234
+
137
235
  display:none;
138
236
 
237
+ flex: 1 1 auto;
238
+
239
+ width:90%;
240
+
241
+ background:#fff;
242
+
139
- }
243
+ }
140
-
141
- #img001,
244
+
142
-
143
- #img003,
245
+
144
-
145
- #img004,
246
+
146
-
147
- #img005,
148
-
149
- #img006{
150
-
151
- position:absolute;
247
+ #tab01in:checked ~ #tab01,
248
+
152
-
249
+ #tab02in:checked ~ #tab02{
250
+
153
- bottom:0;
251
+ color:#555;
252
+
154
-
253
+ outline: 1px solid #ddd;
254
+
255
+ outline-offset: -3px;
256
+
257
+ background:#fff;
258
+
155
- }
259
+ }
156
-
157
-
158
-
159
- #thumb001input,
260
+
160
-
161
- #thumb002input,
261
+
162
-
163
- #thumb003input,
262
+
164
-
165
- #thumb004input,
166
-
167
- #thumb005input,
168
-
169
- #thumb006input{display:none;}
170
-
171
-
172
-
173
- #thumb001input:checked ~ #img001,
263
+ #tab01in:checked ~ #tab_cont1,
174
-
264
+
175
- #thumb002input:checked ~ #img002,
265
+ #tab02in:checked ~ #tab_cont2{
176
-
266
+
177
- #thumb003input:checked ~ #img003,
267
+ display:block;
178
-
179
- #thumb004input:checked ~ #img004,
268
+
180
-
181
- #thumb005input:checked ~ #img005,
182
-
183
- #thumb006input:checked ~ #img006{opacity:1;z-index:100;display:block;}
184
-
185
- #thumb001:hover ~ #img001,
186
-
187
- #thumb002:hover ~ #img002,
188
-
189
- #thumb003:hover ~ #img003,
190
-
191
- #thumb004:hover ~ #img004,
192
-
193
- #thumb005:hover ~ #img005,
194
-
195
- #thumb006:hover ~ #img006{opacity:1;z-index:101;}
269
+ }
196
270
 
197
271
 
198
272
 
199
273
  </style>
200
274
 
275
+ <input id="tab01in" type="radio" name="tab_radio" checked="checked"></input>
276
+
277
+ <label for="tab01in" id="tab01">Pattern1</label>
278
+
279
+ <input id="tab02in" type="radio" name="tab_radio"></input>
280
+
281
+ <label for="tab02in" id="tab02">Pattern2</label>
282
+
283
+
284
+
285
+ <div id="tab_cont1">
286
+
287
+
288
+
289
+ <style>
290
+
291
+
292
+
293
+ </style>
294
+
295
+
296
+
297
+ <div class="wrap">
298
+
299
+ <input id="thumb001input" type="radio" name="myradio2"></input>
300
+
301
+ <label for="thumb001input" id="thumb001" class="thumb">
302
+
303
+ <img src="1.png">
304
+
305
+ </label>
306
+
307
+ <input id="thumb002input" type="radio" name="myradio2"></input>
308
+
309
+ <label for="thumb002input" id="thumb002" class="thumb">
310
+
311
+ <img src="2.png">
312
+
313
+ </label>
314
+
315
+ <input id="thumb003input" type="radio" name="myradio2"></input>
316
+
317
+ <label for="thumb003input" id="thumb003" class="thumb">
318
+
319
+ <img src="3.png">
320
+
321
+ </label>
322
+
323
+ <input id="thumb004input" type="radio" name="myradio2"></input>
324
+
325
+ <label for="thumb004input" id="thumb004" class="thumb">
326
+
327
+ <img src="4.png">
328
+
329
+ </label>
330
+
331
+ <input id="thumb005input" type="radio" name="myradio2"></input>
332
+
333
+ <label for="thumb005input" id="thumb005" class="thumb">
334
+
335
+ <img src="5.png">
336
+
337
+ </label>
338
+
339
+ <input id="thumb006input" type="radio" name="myradio2"></input>
340
+
341
+ <label for="thumb006input" id="thumb006" class="thumb">
342
+
343
+ <img src="6.png">
344
+
345
+ </label>
346
+
347
+ <div id="img000" class="img"><img src="0.png"></div>
348
+
349
+ <div id="img001" class="img"><img src="1.png"></div>
350
+
351
+ <div id="img002" class="img"><img src="2.png"></div>
352
+
353
+ <div id="img003" class="img"><img src="3.png"></div>
354
+
355
+ <div id="img004" class="img"><img src="4.png"></div>
356
+
357
+ <div id="img005" class="img"><img src="5.png"></div>
358
+
359
+ <div id="img006" class="img"><img src="6.png"></div>
360
+
361
+ </div>
362
+
363
+
364
+
365
+ </div>
366
+
367
+
368
+
369
+ <div id="tab_cont2">
370
+
371
+
372
+
373
+ <style>
374
+
375
+
376
+
377
+ </style>
378
+
379
+
380
+
381
+ another content
382
+
383
+
384
+
385
+ </div>
386
+
387
+
388
+
389
+ <hr>
390
+
391
+
392
+
201
- </head>
393
+ </body>
202
394
 
203
395
 
204
396
 
205
- <body>
206
-
207
-
208
-
209
- <h1>demo</h1>
210
-
211
-
212
-
213
- <hr>
214
-
215
- <style>
216
-
217
- #tab01in,#tab02in{display:none;}
218
-
219
- #tab01,#tab02{
220
-
221
- flex: 1 1 auto;
222
-
223
- width:45%;
224
-
225
- color:#ccc;
226
-
227
- font-size:20px;
228
-
229
- text-align:center;
230
-
231
- padding:1em;
232
-
233
- margin-right:1px;
234
-
235
- background:#eee;
236
-
237
- transition:0.1s;
238
-
239
- }
240
-
241
- #tab02{margin:0;}
242
-
243
-
244
-
245
- #tab_cont1,
246
-
247
- #tab_cont2{
248
-
249
- display:none;
250
-
251
- flex: 1 1 auto;
252
-
253
- width:90%;
254
-
255
- background:#fff;
256
-
257
- }
258
-
259
-
260
-
261
- #tab01in:checked ~ #tab01,
262
-
263
- #tab02in:checked ~ #tab02{
264
-
265
- color:#555;
266
-
267
- outline: 1px solid #ddd;
268
-
269
- outline-offset: -3px;
270
-
271
- background:#fff;
272
-
273
- }
274
-
275
-
276
-
277
- #tab01in:checked ~ #tab_cont1,
278
-
279
- #tab02in:checked ~ #tab_cont2{
280
-
281
- display:block;
282
-
283
- }
284
-
285
-
286
-
287
- </style>
288
-
289
- <input id="tab01in" type="radio" name="tab_radio" checked="checked"></input>
290
-
291
- <label for="tab01in" id="tab01">Pattern1</label>
292
-
293
- <input id="tab02in" type="radio" name="tab_radio"></input>
294
-
295
- <label for="tab02in" id="tab02">Pattern2</label>
296
-
297
-
298
-
299
- <div id="tab_cont1">
300
-
301
-
302
-
303
- <style>
304
-
305
-
306
-
307
- </style>
308
-
309
-
310
-
311
- <div class="wrap">
312
-
313
- <input id="thumb001input" type="radio" name="myradio2"></input>
314
-
315
- <label for="thumb001input" id="thumb001" class="thumb">
316
-
317
- <img src="1.png">
318
-
319
- </label>
320
-
321
- <input id="thumb002input" type="radio" name="myradio2"></input>
322
-
323
- <label for="thumb002input" id="thumb002" class="thumb">
324
-
325
- <img src="2.png">
326
-
327
- </label>
328
-
329
- <input id="thumb003input" type="radio" name="myradio2"></input>
330
-
331
- <label for="thumb003input" id="thumb003" class="thumb">
332
-
333
- <img src="3.png">
334
-
335
- </label>
336
-
337
- <input id="thumb004input" type="radio" name="myradio2"></input>
338
-
339
- <label for="thumb004input" id="thumb004" class="thumb">
340
-
341
- <img src="4.png">
342
-
343
- </label>
344
-
345
- <input id="thumb005input" type="radio" name="myradio2"></input>
346
-
347
- <label for="thumb005input" id="thumb005" class="thumb">
348
-
349
- <img src="5.png">
350
-
351
- </label>
352
-
353
- <input id="thumb006input" type="radio" name="myradio2"></input>
354
-
355
- <label for="thumb006input" id="thumb006" class="thumb">
356
-
357
- <img src="6.png">
358
-
359
- </label>
360
-
361
- <div id="img000" class="img"><img src="0.png"></div>
362
-
363
- <div id="img001" class="img"><img src="1.png"></div>
364
-
365
- <div id="img002" class="img"><img src="2.png"></div>
366
-
367
- <div id="img003" class="img"><img src="3.png"></div>
368
-
369
- <div id="img004" class="img"><img src="4.png"></div>
370
-
371
- <div id="img005" class="img"><img src="5.png"></div>
372
-
373
- <div id="img006" class="img"><img src="6.png"></div>
374
-
375
- </div>
376
-
377
-
378
-
379
- </div>
380
-
381
-
382
-
383
- <div id="tab_cont2">
384
-
385
-
386
-
387
- <style>
388
-
389
-
390
-
391
- </style>
392
-
393
-
394
-
395
- <div class="wrap">
396
-
397
- <input id="thumb001input" type="radio" name="myradio2"></input>
398
-
399
- <label for="thumb001input" id="thumb001" class="thumb">a</label>
400
-
401
- <input id="thumb002input" type="radio" name="myradio2"></input>
402
-
403
- <label for="thumb002input" id="thumb002" class="thumb">b</label>
404
-
405
- <input id="thumb003input" type="radio" name="myradio2"></input>
406
-
407
- <label for="thumb003input" id="thumb003" class="thumb">c</label>
408
-
409
- <input id="thumb004input" type="radio" name="myradio2"></input>
410
-
411
- <label for="thumb004input" id="thumb004" class="thumb">d</label>
412
-
413
- <input id="thumb005input" type="radio" name="myradio2"></input>
414
-
415
- <label for="thumb005input" id="thumb005" class="thumb">e</label>
416
-
417
- <input id="thumb006input" type="radio" name="myradio2"></input>
418
-
419
- <label for="thumb006input" id="thumb006" class="thumb">f</label>
420
-
421
- <div id="img000" class="img"></div>
422
-
423
- <div id="img001" class="img"></div>
424
-
425
- <div id="img002" class="img"></div>
426
-
427
- <div id="img003" class="img"></div>
428
-
429
- <div id="img004" class="img"></div>
430
-
431
- <div id="img005" class="img"></div>
432
-
433
- <div id="img006" class="img"></div>
434
-
435
- </div>
436
-
437
-
438
-
439
- </div>
440
-
441
-
442
-
443
- <hr>
444
-
445
-
446
-
447
- </body>
448
-
449
-
450
-
451
397
  </html>
452
398
 
453
399
  ```
454
400
 
455
401
 
456
402
 
457
- 詳細はあとで書きます。
458
-
459
-
460
-
461
- #img000の上に
403
+ ほんとは「0画像の上に「1」〜「6」の画像がかぶるはず(小要素にposition:absolute;を指定すると、親要素はその子要素の大きさを無視したサイズで描画される)
462
-
404
+
405
+
406
+
463
- #img001...#img006かぶってくれな問題です。
407
+ でも、実際にはしっかりと小要素の高さ算出されてしまっていす。
408
+
409
+
410
+
411
+ cssでコメントアウトした部分を有効にすれば、期待通りの表示にはなりますが、この方法は個人的にしっくりきません。
412
+
413
+
414
+
415
+ どなたか原因に心当たりはないでしょうか。