JavaScript에서 위치 지정 요소의 스택 순서(z-index) 설정하는 방법

위치 지정된 요소의 스택 순서를 설정하려면 zIndex 속성을 사용합니다. 이 속성은 여러 요소가 서로 겹칠 때 어떤 요소가 앞쪽에 표시될지 결정하는 역할을 합니다.

JavaScript에서는 element.style.zIndex 형태로 접근하여 z-index 값을 동적으로 변경할 수 있습니다. 값이 클수록 요소가 스택의 위쪽(앞쪽)에 배치되고, 값이 작거나 음수일수록 뒤쪽에 배치됩니다.

예제

아래 코드는 버튼을 클릭하면 이미지의 z-index 값을 -1에서 1로 변경하여 스택 순서를 조정하는 예제입니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: -1
         }
      </style>
   </head>
   <body>
      <img id = "myID"
         src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg"
         width = "150" height = "150">
      <button type="button" onclick="myFunction()">Set Stack Order</button>
      <p>Z-index is -1</p>
      <script>
         function myFunction() {
            document.getElementById("myID").style.zIndex = "1";
         }
      </script>
   </body>
</html>

코드 설명

초기 CSS에서 이미지는 position: absolute와 z-index: -1로 설정되어 있어 페이지의 다른 콘텐츠 뒤에 배치됩니다.
버튼을 클릭하면 myFunction()이 실행되어 이미지의 style.zIndex 값이 1로 변경됩니다.
그 결과 이미지가 다른 요소들보다 앞쪽에 표시되며, 스택 순서가 성공적으로 변경됩니다.

주의 사항

zIndex 속성이 정상적으로 작동하려면 해당 요소에 반드시 position 속성(relative, absolute, fixed, sticky 중 하나)이 설정되어 있어야 합니다. position이 지정되지 않은 정적(static) 요소에는 z-index가 적용되지 않습니다.