.ex4 {position: relative; width: 200px; height: 200px; border: 1px solid #7a7a7a; float:left; margin:10px; } .ex4 div { position: absolute; width: 100px; height: 20px; padding-top:80px; vertical-align:baseline; color:#fff; } .ex4 div:nth-child(1) { left:10px; top:10px; background-color: cadetblue } .ex4 div:nth-child(2) { left:30px; top:30px; background-color: darkgreen } .ex4 div:nth-child(3) { left:50px; top:50px; background-color: darkorange } .ex4 div:nth-child(4) { left:70px; top:70px; background-color: cornflowerblue } .z5 {z-index: 10;} .z6 {z-index: 7;} .z7 {z-index: 5;} .z8 {z-index: 3;}
<!DOCTYPE html> <html lang="ko"> <head></head> <body> <div class="ex4"> <div class="z1">1</div> <div class="z2">2</div> <div class="z3">3</div> <div class="z4">4</div> </div> <div class="ex4"> <div class="z5">1</div> <div class="z6">2</div> <div class="z7">3</div> <div class="z8">4</div> </div> </body> </html>