Trouble Shooting, ActiveX z-index

Legacy 코드들 가운데 ActiveX를 사용하는 것이 있어

 

ActiveX가 모달 창보다 화면 상 위에 있어 모달 창이 사라져 보이는 이슈가 발생했습니다.

 

ActiveX 구조가 어떻게 되어 있는 지 모르는 상황에서 z-index로 어떻게 해보려고 했지만

 

아무리 z-index 값을 바꿔도 해결되지 않아

 

DOM 조작을 임의로 하드 코딩하기로 결정했습니다.

 

결국 display를 이용해 모달이 팝업되어 있는 상황에서는 잠시 display를 none으로 바꾸고

 

모달창이 꺼지면 다시 display를 바꾸는 간단한 작업이었지만,,

 

처음엔 z-index가 왜 안될까 몇시간 고민했던 것 같습니다.

 

ActiveX를 웹에서 표현할 때는 object 태그로 사용됩니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/object#%EC%86%8D%EC%84%B1

<object> - HTML: Hypertext Markup Language | MDN

 

알고보니 Object tag는 CSS 속성이 z-index가 안되었고

z-index vs <object> : is there any reason why this doesnt work on majors browser? (except Firefox)

 

다음과 같이 wmode라는 파라미터를 통해

 

해당 ActiveX와 같은 리소스들을 불투명 혹은 투명하게 만드는 과정이 필요했다고 합니다.

 

후기

object tag도 activeX에 관한 것도 다 생소하지만 안되는 것은 없고

찾다보면 결과는 나온다는 것,,!