flex-item-z-ordering-001-ref.html (1103B)
1 <!DOCTYPE html> 2 <style> 3 .container > * { 4 position: absolute; 5 } 6 .large { 7 width: 50px; 8 height: 50px; 9 } 10 .small { 11 left: 25px; 12 height: 25px; 13 width: 50px; 14 } 15 </style> 16 <div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div> 17 <div class="container" style="position:relative"> 18 <div class="large" style="z-index: 1; background-color: salmon;"></div> 19 <div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div> 20 <div class="small" style="z-index: 150; background-color: green"></div> 21 <div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div> 22 </div> 23 <div class="container" style="position:relative; top: 50px"> 24 <img class="large" style="z-index: 1; background-color: salmon;"></img> 25 <img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img> 26 <img class="small" style="z-index: 150; background-color: green"></img> 27 <img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img> 28 </div>