Q&A
と思ったら回答文を書いている間に質問が修正されたようですね。失礼しました。
###position:absolute;を指定した小要素の高さが計算されてしまう。
サムネイルにclick/mouseonで、画像が表示されるやつです。
html
1<!DOCTYPE html> 2 3<html> 4 5 <head> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <style> 8 *{ 9 box-sizing:border-box; 10 margin:0; 11 padding:0; 12 } 13 body{ 14 display:flex; 15 flex-wrap:wrap; 16 align-content:flex-start; 17 width:100vw; 18 background:#ddd; 19 padding:10px; 20 overflow:auto; 21 } 22 h1,hr{width:100%;} 23 24 .wrap{ 25 box-sizing:content-box; 26 position:relative; 27 display:flex; 28 flex-wrap:wrap; 29 align-content:flex-start; 30 max-width:700px; 31 border:1px solid #888; 32 margin:2em auto; 33 background:green; 34 } 35 36 .wrap img{ 37 display:block; 38 width:100%; 39 } 40 41 .thumb{ 42 flex: 1 1 auto; 43 width:30%; 44 border:1px solid #ccc; 45 } 46 47 .img{ 48 flex: 1 1 auto; 49 width:100%; 50 transition:0.1s; 51 opacity:0; 52 border:1px solid #ccc; 53 } 54 #img000{ 55 /*position:absolute;*//*この記述はいらないはず*/ 56 /*bottom:0;*//*この記述はいらないはず*/ 57 opacity:1; 58 } 59 #img001, 60 #img003, 61 #img004, 62 #img005, 63 #img006{ 64 position:absolute; 65 bottom:0; 66 } 67 68 #thumb001input, 69 #thumb002input, 70 #thumb003input, 71 #thumb004input, 72 #thumb005input, 73 #thumb006input{display:none;} 74 75 #thumb001input:checked ~ #img001, 76 #thumb002input:checked ~ #img002, 77 #thumb003input:checked ~ #img003, 78 #thumb004input:checked ~ #img004, 79 #thumb005input:checked ~ #img005, 80 #thumb006input:checked ~ #img006{opacity:1;z-index:100;} 81 #thumb001:hover ~ #img001, 82 #thumb002:hover ~ #img002, 83 #thumb003:hover ~ #img003, 84 #thumb004:hover ~ #img004, 85 #thumb005:hover ~ #img005, 86 #thumb006:hover ~ #img006{opacity:1;z-index:101;} 87 88 </style> 89 </head> 90 91 <body> 92 93 <h1>demo</h1> 94 95 <hr> 96 <style> 97 #tab01in,#tab02in{display:none;} 98 #tab01,#tab02{ 99 flex: 1 1 auto; 100 width:45%; 101 color:#ccc; 102 font-size:20px; 103 text-align:center; 104 padding:1em; 105 margin-right:1px; 106 background:#eee; 107 transition:0.1s; 108 } 109 #tab02{margin:0;} 110 111 #tab_cont1, 112 #tab_cont2{ 113 display:none; 114 flex: 1 1 auto; 115 width:90%; 116 background:#fff; 117 } 118 119 #tab01in:checked ~ #tab01, 120 #tab02in:checked ~ #tab02{ 121 color:#555; 122 outline: 1px solid #ddd; 123 outline-offset: -3px; 124 background:#fff; 125 } 126 127 #tab01in:checked ~ #tab_cont1, 128 #tab02in:checked ~ #tab_cont2{ 129 display:block; 130 } 131 132 </style> 133 <input id="tab01in" type="radio" name="tab_radio" checked="checked"></input> 134 <label for="tab01in" id="tab01">Pattern1</label> 135 <input id="tab02in" type="radio" name="tab_radio"></input> 136 <label for="tab02in" id="tab02">Pattern2</label> 137 138 <div id="tab_cont1"> 139 140 <style> 141 142 </style> 143 144 <div class="wrap"> 145 <input id="thumb001input" type="radio" name="myradio2"></input> 146 <label for="thumb001input" id="thumb001" class="thumb"> 147 <img src="1.png"> 148 </label> 149 <input id="thumb002input" type="radio" name="myradio2"></input> 150 <label for="thumb002input" id="thumb002" class="thumb"> 151 <img src="2.png"> 152 </label> 153 <input id="thumb003input" type="radio" name="myradio2"></input> 154 <label for="thumb003input" id="thumb003" class="thumb"> 155 <img src="3.png"> 156 </label> 157 <input id="thumb004input" type="radio" name="myradio2"></input> 158 <label for="thumb004input" id="thumb004" class="thumb"> 159 <img src="4.png"> 160 </label> 161 <input id="thumb005input" type="radio" name="myradio2"></input> 162 <label for="thumb005input" id="thumb005" class="thumb"> 163 <img src="5.png"> 164 </label> 165 <input id="thumb006input" type="radio" name="myradio2"></input> 166 <label for="thumb006input" id="thumb006" class="thumb"> 167 <img src="6.png"> 168 </label> 169 <div id="img000" class="img"><img src="0.png"></div> 170 <div id="img001" class="img"><img src="1.png"></div> 171 <div id="img002" class="img"><img src="2.png"></div> 172 <div id="img003" class="img"><img src="3.png"></div> 173 <div id="img004" class="img"><img src="4.png"></div> 174 <div id="img005" class="img"><img src="5.png"></div> 175 <div id="img006" class="img"><img src="6.png"></div> 176 </div> 177 178 </div> 179 180 <div id="tab_cont2"> 181 182 <style> 183 184 </style> 185 186 another content 187 188 </div> 189 190 <hr> 191 192 </body> 193 194</html>
ほんとは「0」の画像の上に「1」〜「6」の画像がかぶるはず（小要素にposition:absolute;を指定すると、親要素はその子要素の大きさを無視したサイズで描画される）
でも、実際にはしっかりと小要素の高さが算出されてしまっています。
cssでコメントアウトした部分を有効にすれば、期待通りの表示にはなりますが、この方法は個人的にしっくりきません。
どなたか原因に心当たりはないでしょうか。
回答3件
0
引用テキスト■class：
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える
■id：
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない
class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。
同じ人に同じこと言うと思わなかった。
投稿2017/03/17 10:02
総合スコア2050
0
- 不要なタグ、意味のないタグの消去。
- idの重複があったのでclassにする。
- CSSはできるかぎり一箇所にまとめる。
- input要素の閉じタグは不要なので削除。
以上を修正しましたが、この動作のどのあたりが質問の内容にあたるのでしょうか？
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>タイトル</title> 7 <style type="text/css"> 8 * { 9 box-sizing: border-box; 10 margin: 0; 11 padding: 0; 12 } 13 14 body { 15 display: flex; 16 flex-wrap: wrap; 17 align-content: flex-start; 18 width: 100vw; 19 background: #ddd; 20 padding: 10px; 21 overflow: auto; 22 } 23 24 h1, hr { 25 width: 100%; 26 } 27 28 .wrap { 29 box-sizing: content-box; 30 position: relative; 31 display: flex; 32 flex-wrap: wrap; 33 align-content: flex-start; 34 max-width: 700px; 35 border: 1px solid #888; 36 margin: 2em auto; 37 38 background: green; 39 } 40 41 .wrap img { 42 display: block; 43 border: 1px solid #eee; 44 width: 100%; 45 } 46 47 .thumb { 48 flex: 1 1 auto; 49 width: 30%; 50 border: 1px solid #555; 51 } 52 53 .thumb001 { 54 background: azure; 55 } 56 57 .thumb002 { 58 background: lightYellow; 59 } 60 61 .thumb003 { 62 background: pink; 63 } 64 65 .thumb004 { 66 background: red; 67 } 68 69 .thumb005 { 70 background: green; 71 } 72 73 .thumb006 { 74 background: blue; 75 } 76 77 .img { 78 flex: 1 1 auto; 79 width: 100%; 80 transition: 0.1s; 81 opacity: 0; 82 83 border: 1px solid #555; 84 } 85 86 .img000 { 87 opacity: 1; 88 display: none; 89 } 90 91 .img001, 92 .img003, 93 .img004, 94 .img005, 95 .img006 { 96 position: absolute; 97 bottom: 0; 98 } 99 100 .thumb001input, 101 .thumb002input, 102 .thumb003input, 103 .thumb004input, 104 .thumb005input, 105 .thumb006input { 106 display: none; 107 } 108 109 .thumb001input:checked ~ .img001, 110 .thumb002input:checked ~ .img002, 111 .thumb003input:checked ~ .img003, 112 .thumb004input:checked ~ .img004, 113 .thumb005input:checked ~ .img005, 114 .thumb006input:checked ~ .img006 { 115 opacity: 1; 116 z-index: 100; 117 display: block; 118 } 119 120 .thumb001:hover ~ .img001, 121 .thumb002:hover ~ .img002, 122 .thumb003:hover ~ .img003, 123 .thumb004:hover ~ .img004, 124 .thumb005:hover ~ .img005, 125 .thumb006:hover ~ .img006 { 126 opacity: 1; 127 z-index: 101; 128 } 129 130 .tab01in, .tab02in { 131 display: none; 132 } 133 134 .tab01, .tab02 { 135 flex: 1 1 auto; 136 width: 45%; 137 color: #ccc; 138 font-size: 20px; 139 text-align: center; 140 padding: 1em; 141 margin-right: 1px; 142 background: #eee; 143 transition: 0.1s; 144 } 145 146 .tab02 { 147 margin: 0; 148 } 149 150 .tab_cont1, 151 .tab_cont2 { 152 display: none; 153 flex: 1 1 auto; 154 width: 90%; 155 background: #fff; 156 } 157 158 .tab01in:checked ~ .tab01, 159 .tab02in:checked ~ .tab02 { 160 color: #555; 161 outline: 1px solid #ddd; 162 outline-offset: -3px; 163 background: #fff; 164 } 165 166 .tab01in:checked ~ .tab_cont1, 167 .tab02in:checked ~ .tab_cont2 { 168 display: block; 169 } 170 </style> 171</head> 172<body> 173<h1>demo</h1> 174<hr> 175<input class="tab01in" type="radio" name="tab_radio" checked="checked"> 176<label class="tab01">Pattern1</label> 177<input class="tab02in" type="radio" name="tab_radio"> 178<label class="tab02">Pattern2</label> 179<div class="tab_cont1"> 180 <div class="wrap"> 181 <input class="thumb001input" type="radio" name="myradio2"> 182 <label class="thumb001 thumb"> 183 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1"> 184 </label> 185 <input class="thumb002input" type="radio" name="myradio2"> 186 <label class="thumb002 thumb"> 187 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2"> 188 </label> 189 <input class="thumb003input" type="radio" name="myradio2"> 190 <label class="thumb003 thumb"> 191 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3"> 192 </label> 193 <input class="thumb004input" type="radio" name="myradio2"> 194 <label class="thumb004 thumb"> 195 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4"> 196 </label> 197 <input class="thumb005input" type="radio" name="myradio2"> 198 <label cla4s="thumb005 thumb"> 199 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5"> 200 </label> 201 <input class="thumb006input" type="radio" name="myradio2"> 202 <label class="thumb006 thumb"> 203 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6"> 204 </label> 205 <div class="img000 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image0"></div> 206 <div class="img001 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image1"></div> 207 <div class="img002 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2"></div> 208 <div class="img003 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3"></div> 209 <div class="img004 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4"></div> 210 <div class="img005 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5"></div> 211 <div class="img006 img"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6"></div> 212 </div> 213</div> 214<div class="tab_cont2"> 215 <div class="wrap"> 216 <input class="thumb001input" type="radio" name="myradio2"> 217 <label class="thumb001 thumb">a</label> 218 <input class="thumb002input" type="radio" name="myradio2"> 219 <label class="thumb002 thumb">b</label> 220 <input class="thumb003input" type="radio" name="myradio2"> 221 <label class="thumb003 thumb">c</label> 222 <input class="thumb004input" type="radio" name="myradio2"> 223 <label class="thumb004 thumb">d</label> 224 <input class="thumb005input" type="radio" name="myradio2"> 225 <label class="thumb005 thumb">e</label> 226 <input class="thumb006input" type="radio" name="myradio2"> 227 <label class="thumb006 thumb">f</label> 228 <div class="img000 img"></div> 229 <div class="img001 img"></div> 230 <div class="img002 img"></div> 231 <div class="img003 img"></div> 232 <div class="img004 img"></div> 233 <div class="img005 img"></div> 234 <div class="img006 img"></div> 235 </div> 236</div> 237<hr> 238</body> 239</html>
投稿2017/03/17 14:59
総合スコア14731
わざわざコードを修正いただきありがとうごさいます。
問題の箇所は、.img000〜.img006が表示される部分です。
position:absolute;の力によって、.img001〜.img006がfloatされたみたいになって、.img000の上に重なるのが理想なのですが、そのように動作しません。
divタグではなく、imgタグだけでマークアップしてたときには、ちゃんとimg001-006がimg000の上に浮いていたのですが、色々手を加えてみたら、いつの間にかabsoluteされていないみたいな表示をされるようになっていました。
top:0;
なら、ちゃんと浮くのに
bottom:0;
だと、staticみたいな挙動になるので、「なんだこれ？！」という状況です。
0
ベストアンサー
.img001, .img003, .img004, .img005, .img006 { position: absolute; bottom: 0; }
ここに .img002 が指定されていないのが原因だと思います
投稿2017/03/22 06:37
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/17 14:28