애플릿위에 엘리먼트 올리기

애플릿을 사용하는 프로젝트에서 간혹 엘리먼트를 올려야 할 상황이 있습니다.

제가 근무하는 직장의 웹기반 솔루션은 일부분만 자바 애플릿을 사용합니다.

업무중 한가지 상황이 주어졌는데요.

"jQuery Layout을 사용하면서 resize를 할 경우 미리보기 막대(엘리먼트)가 애플릿에 가려져 보이지 않으니 보완"하라는 내용이였습니다.

애플릿을 감싸고 있는 엘리먼트, 상위, 그 상위의 z-index를 변경해도 전혀 먹히지 않습니다.

꼭 애플릿이 아니더라도 Vworld, Google Earth 등등 또한 먹히지 않습니다.

해결방법은 매우 쉽습니다.

<iframe id="ground" style="position: absolute; z-index: 10;"></iframe>
<div id="content" style="position: absolute; z-index:11;"></div>

1. iframe의 z-index를 임의로 주시구요.

2. iframe보다 높은 z-index값을 필요한 엘리먼트에 적용하면 되겠습니다.

적용이 되지 않는다면 애플릿 or 애플릿을 감싸고 있는 부모의 z-index가 존재하는지 확인해보시면 되겠습니다.

(z-index의 값이 존재한다면 iframe보다 낮아야합니다.)

(사이즈는 사용할 컨텐츠에 맞게 알아서 수정해주세요. 테두리는 없애는것이 좋습니다)

아참! 사용하실 컨텐츠가 이미지인데, 투명이 들어간 부분이 있다면 거의 포기하시는게 좋습니다...

iframe을 투명하게 만들고 그 위에 무언가를 올린다 해도 뒷배경이 보이기때문에 전혀 사용할 수 없습니다.

요약해보자면

iframe은 쉽게 애플릿위에 깔아줄 바닥으로 이해하면 되구요.

그위에 필요한 엘리먼트를 올리신다고 생각하시면 됩니다.

가장 중요한 것은 z-index의 값이 되겠습니다.