본문
Z-INDEX
프로그래밍/HTML&JavaScript 2015. 11. 5. 10:06
반응형
# Z-INDEX
태그들을 겹쳐서(overlapping elements) 보여줄때 사용, 큰값을 입력할 수록 위로 올라간다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <style> #one { background:red; width:300px; height:300px; position: absolute; left: 0px; top: 0px; z-index: -3; } #two { background:green; width:200px; height:200px; position: absolute; left: 0px; top: 0px; z-index: -2; } #three { background:blue; width:100px; height:100px; position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html> | cs |
반응형
댓글