'z-index'에 해당되는 글 2건

  1. 2010.01.26 Active-X 위에 레이어 올리기 (1)
  2. 2008.01.29 Z-Index Bug : IE 에서만 발생하는 z-index 버그 (2)

서론보기..



아래의 링크에서는 iframe 을 사용한 보다 구체적인 코드를 보여줍니다.
http://hi.baidu.com/qianhh/blog/item/982524cea0d99e33b600c880.html

먼저 iframe 하나를 준비 합니다.

<IFRAME style="DISPLAY: none; LEFT: 0px; POSITION: absolute; TOP: 0px" src="javascript:false;" frameBorder="0" scrolling="no"></IFRAME>

여기서 src 부분을 위와 같이 처리하면 iframe 이 페이지를 로드하기위한 시도를 하지 않는다고 합니다.(https 를 사용하는 경우 이렇게 하지 않으면 오류 메세지가 나온다)- 좋은 팁인듯..

위의 태그를 static  스트링으로 두고 insertAdjacentHTML() 를 사용해 삽입하는 것도 좋음.

그 다음,
iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display
의 속성을 조정해 이 아이프레임 위에 div 를 위치시키는 것임.

그러면 windowed 레이어간 z-index 상위인 아이프레임은 위에 나타나게 되고, 아이프레임은 windowless 의 z-index 도 수용하므로 div z-index  가 더 상위라면 아이프레임 위에 보이게 된다....라는 꽁수

아마도 이부분을 jQuery 에서도 구현해 두었을 것 같다는 생각으로 검색해 보니...
이미 플로그인이 마련되어 있었다.

결국,

jQuery 플러그인
http://brandonaaron.net/code 의 bgiframe 을 사용하면 만사 오케이란 소리다.

이 것은 jquery UI 에 external 폴더에도 이미 들어가 있으며 jquery ui 에서 이미 사용되고 있다.
jquery.bgiframe.js 파일을 링크하고

$("#loginDlg").dialog({
   bgiframe: true,
   height: 240,
   modal: true,
   autoOpen:false
});

위 처럼 사용하면 되겠다.

------------- 추가 내용 --------------

위의 방법은 이상하게도 IE6 의 select 컨트롤만 대상으로 만들어진 듯 하다.
Active-x 에서는 원하는 결과대로 나오지 않는다.

js 파일을 까보니 역시나 IE7 이상에서는 iframe 을 생성하지 않는다.
따라서 js 파일을 수정후 강제로 iframe 의 사이즈를 조정해보니 active-x 위에는 올라가기는 하지만 오버레이의 border 가 안보인다....

다른 방법을 찾다가...
http://jquery.malsup.com/block/#element jquery blockUI 란 놈을 찾았다.
테스트 해보니 잘된다.
특정영역에 active-x 가존재하고 그 위에 div 레이어를 올리려면 우선 위의 방법으로 active-x 를 block 시키고 그위에 div 를 올리는 방법을 쓰면 되겠다.

신고

댓글을 달아 주세요

  1. Favicon of http://www.morganjewelers.org/morganjewelers/morgan-jewelers-salt-lake-city.html BlogIcon morgan jewelers salt lake city 2011.05.22 02:11 신고 Address Modify/Delete Reply

    당신에게 자신의 지식에 대한 감사, 감사 내가 새로운 지식을 많이 찾을 수 있습니다. 다시 한번 감사드립니다. 너도 내 사이트를 방문하시기 바랍니다


출처 :http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다.
두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는
position:relative 로 되어있다는 것이다.
IE 에서만 이런경우 z-index 를 무시해 버린다.

이유는 잘 모르지만 노란박스가  20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다.

시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index  20 을 주니 정상적으로 동작했다.

IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드의 z-index 를 따르는 것인가?
신고

댓글을 달아 주세요

  1. 2008.10.21 14:24 Address Modify/Delete Reply

    비밀댓글입니다

티스토리 툴바