賢威では重なりを指定するCSSのクラスがあらかじめ用意されています。
ただし、このクラスを使うには、以下のサンプルに「style=”background-color: #b2ebf2; width: 100px; height: 100px; position: relative; top: 0; left: 0;”」と指定してあるように、クラスを指定する要素とその親要素に「position」が指定されている必要がありますので、ご注意ください。
たとえば次のサンプルは、HTML上、「青のボックス」の中に、「オレンジのボックス」「黄色のボックス」「緑のボックス」「ピンクのボックス」を記述してますが、表示の順番をクラスで入れ替えて「青のボックス」「緑のボックス」「黄色のボックス」「ピンクのボックス」「オレンジのボックス」の順で並び替えています。
|
1 2 3 4 5 6 |
<div class="z1" style="background-color: #b2ebf2; width: 100px; height: 100px; position: relative; top: 0; left: 0;"> <div class="z5" style="background-color: #ffe0b2; width: 100px; height: 100px; position: absolute; top: 40px; left: 40px;"></div> <div class="z3" style="background-color: #fff9c4; width: 100px; height: 100px; position: absolute; top: 20px; left: 20px;"></div> <div class="z2" style="background-color: #dcedc8; width: 100px; height: 100px; position: absolute; top: 10px; left: 10px;"></div> <div class="z4" style="background-color: #ffecb3; width: 100px; height: 100px; position: absolute; top: 30px; left: 30px;"></div> </div> |
