-
z-index프로그래밍/HTML&CSS 2022. 9. 11. 21:33728x90
HTML 요소는 position 속성을 통해 위치를 결정하면 위치 및 방식에 따라 요소를 겹치게 놓을 수 있습니다. 보통 겹쳐지는 순서를 먼저 작성한 코드부터 아래에 위치해 쌓이게 된다.
z-index 속성은 HTML 요소이 쌓이는 순서를 결정할 때 사용하며, z-index의 크기가 클수록 위에 위치하고 작을 수 록 아래 위치하게된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>z-index</title> <style> div#wrapper{ position: relative; } div.box{ position: absolute; width: 200px; height: 200px; border: 1px solid red; font-size: 25px; } #b1{ left:50px; top: 200px; background-color: pink; z-index: 10; /* z-index : 순서*/ } #b2{ left: 200px; top: 90px; background-color: greenyellow; z-index: 100; } #b3{ left:70px; top: 50px; background-color: gold; z-index: 1; } </style> </head> <body> <div id="wrapper"> <div id="b1" class="box">첫번째 div</div> <div id="b2" class="box">두번째 div</div> <div id="b3" class="box">세번째 div</div> </div> </body> </html>
728x90