こういうソースをかきました
https://codepen.io/anon/pen/gBbejQ
- これでbox3クラスのdivタグにホバーすると
box2クラスのdivタグが表示されたままになります
これはなんでですか?z-indexを設定してないと全部zindex:autoになって、上から順に重ねられるからですか?
- box3クラスのdivタグにzindex:1をつけると
box2クラスのdivタグが表示されなくなります
これはなんでですか?
スタックレベルがbox1とbox2は同じです。違うのはbox3クラスのzindex:1だけです。
この状態だとどうやっても後に書かれたbox2のほうがスタックレベルが大きいからbox2がずっと最善麺に表示されるんじゃないですか?
納得できません
ソースコード
html
1<div class="box1"> 2 <div class="box3"></div> 3 <div class="box5"></div> 4</div> 5<div class="box2"> 6 <div class="box4"></div> 7 <div class="box6"></div> 8</div>
css
1div { 2 width: 250px; 3 height: 250px; 4} 5 6.box1 { 7 background: #ffa; 8 position: relative; 9} 10 11.box2 { 12 background: #faf; 13 position: relative; 14} 15.box3, 16.box4 { 17 opacity: 0; 18 background: green; 19} 20.box1:hover .box3, 21.box2:hover .box4 { 22 opacity: 1; 23} 24 25.box5, 26.box6 { 27 display: none; 28} 29 30.box4:hover, 31.box3:hover { 32 display: block; 33 position: fixed; 34 top: 0; 35 left: 0; 36 width: 100%; 37 height: 100%; 38 background: #aff; 39}
これを読みました
https://app.codegrid.net/entry/z-index-1
この結果がどうしても理解できません
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/09/29 20:55
退会済みユーザー
2018/09/29 21:06
2018/09/29 21:41
2018/09/30 02:07
退会済みユーザー
2018/09/30 07:29
2018/09/30 07:33
退会済みユーザー
2018/09/30 07:41
2018/10/02 07:14