###前提・実現したいこと
z-indexでの順番を時計回りに表示して最後の順番だけ入れ替えたいです。
###該当のソースコード
css3
1<div class="main__box"> 2 <div class="main__8">8</div> 3 <div class="main__5">5</div> 4 <div class="main__1">1</div> 5 <div class="main__7">7</div> 6 <div class="main__4">4</div> 7 <div class="main__6">6</div> 8 <div class="main__2">2</div> 9 <div class="main__3">3</div> 10 <div class="main__9">9</div> 11 </div> 12 13.main__1 { 14 width: 100px; 15 height: 100px; 16 background-color: #ffefd3; 17 margin: 40px 0 0 200px; 18 position: absolute; 19 top: 180px; 20 left: 390px; 21 z-index: 1; 22} 23 24.main__2 { 25 width: 100px; 26 height: 100px; 27 background-color: #7084de; 28 position: absolute; 29 top: 300px; 30 left: 670px; 31 z-index: 2; 32} 33 34.main__3 { 35 width: 100px; 36 height: 100px; 37 background-color: #d0ecea; 38 position: absolute; 39 top: 380px; 40 left: 750px; 41 z-index: 3; 42} 43 44.main__4 { 45 width: 100px; 46 height: 100px; 47 background-color: #8b7a5e; 48 position: absolute; 49 top: 460px; 50 left: 670px; 51 z-index: 4; 52} 53 54.main__5 { 55 width: 100px; 56 height: 100px; 57 background-color: #9fd6d2; 58 position: absolute; 59 top: 540px; 60 left: 590px; 61 z-index: 5; 62} 63 64.main__6 { 65 width: 100px; 66 height: 100px; 67 background-color: #fffee4; 68 position: absolute; 69 top: 460px; 70 left: 510px; 71 z-index: 6; 72} 73 74.main__7 { 75 width: 100px; 76 height: 100px; 77 background-color: #deae70; 78 position: absolute; 79 top: 380px; 80 left: 430px; 81 z-index: 7; 82} 83 84.main__8 { 85 width: 100px; 86 height: 100px; 87 background-color: #de70cf; 88 position: absolute; 89 top: 300px; 90 left: 510px; 91 z-index: 8; 92}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。