[HTML]Object, Flash 위에 div 레이어 올리기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

오브젝트등에 레이어를 올릴 필요가 있었다. 이것은 플래시등에도 적용된다. 보통 플래시나 레이어나 태그로 해당부분을 불러온다. 오브젝트로는 보통 ActiveX를 불러오는 경우가 많고.... 이런 경우는 일반 태그와는 좀 다르게 태그위치에 입혀지다 보니 일반적인 z-index로는 div가 위로 올라오지 않고 밑으로 깔려버린다.

우리는 맵을 다루기 때문에 이 ActiveX맵이 페이지 전체를 먹어버리기 때문에 추가기능들에 대한 레이어는 맵 위에 올려야 했다. 별것 아닌것 같으면서도 은근히 어렵던.....

막상 해놓으니 간단하다. 오브젝트나 플래시는 그냥 똑같이 불러들인다. 그리고 레이어로 올릴 div를 만들고(여기서는 javascript로 활성화되기 때문에 display:none이다.) 그안에 보여줄 내용을 iframe로 넣는다.

Html

<object id="baseObj" width="100%" height="100%" >
</object>

<div id="showContents" style="display:none; width:300px; height:400px; top:20px; left:20px; position:absolute; z-index:2;">
    <iframe  src="01.jsp" id="content1" frameborder="0" scrolling="no" width="300px" height="400px"></iframe>
</div>

그냥 보여주려면 스타일을 주면 되고 보통은 이벤트로 조작을 할테니 javascript로 div의 display를 block로 해주면 object나 flash위에 레이어를 띄울 수 있다.

덧) 이건 iframe이기 때문에 파이어폭스에서는 되지 않는다는거... iframe이 표준이 될거라는 얘기도 들은적이