[펌] flash와 div 간의 z-index 문제

전략...

Ext js로 window바탕화면형 홈페이지를 만들었는데 다른 div를 열었을 때 flash동영상이 가려지지 않고 위에
올라타버리는 문제가 발생하더군요...

가려져야되는데 말이죠,...

object태그나 embed태그에 z-index를 아무리 낮게 잡아주어도 마찬가지였습니다...
꼭 select태그를 z-index를 아무리 낮추어잡아도 다른 div태그보다 상위에 나타나는 것과 비슷한 상황이였죠...

전에 이런 문제를 해결한 적이 있었는데 생각이 나질 않더군요,,..

그래서 인터넷을 뒤져보다가 해결방법을 찾아내였습니다...

<object width="480" height="385">
           <param name="allowFullScreen" value="true"></param>
           <param name="allowscriptaccess" value="always"></param>
           <param name="wmode" value="opaque"></param>
           <param name="movie" 
               value="http://www.youtube.com/p/A27CFEDE8D8D1FFA&amp;hl=ko_KR&amp;fs=1">
           </param>
           <embed src="http://www.youtube.com/p/A27CFEDE8D8D1FFA&amp;hl=ko_KR&amp;fs=1" 
            type="application/x-shockwave-flash" width="480" height="385" allowscriptaccess="always" 
            allowfullscreen="true" wmode="Opaque"></embed>
</object>

이렇게 wmode속성을 주었더니 문제없이 javascript로 생성된 div가 정상적으로 
embeded된 동영상 위에 올라가더군요. (즉, 동영상이 가려지더라구요...)

아쉽게도 유튜브에서 제공하되는 동영상 태그엔 이 속성값이 들어가 있지 않아서 발생된 문제였던 것이였답니다.

크로스 브라우저를 위해 param태그에도 wmode값을 주어봤습니다...


자... wmode 속성에 대해 좀더 알아볼까요.

div등 html태그중에서 범위를 지정해줄 수 있는 태그들은 포토샵등의 프로그램에서의 레이어와 비슷한 개념을 가지고 있습니다.

포토샵에서 해당 레이어를 상위에 위치시킬려면 레이어창에서 해당 레이어를 다른 레이어보다 위에 두면 되지요?
html태그에선 z-index속성을 이용해서 해당 태그를 상위 혹은 하위에 놓을 수가 있습니다.

그런데. embed된 동영상의 경운 z-index가 먹지 않더군요.
다만... embed태그에는 wmode라는 속성이 있어서 이 것을 이용하면 걱정없이 동영상의 위치순서를 지정할 수 있답니다.


wmode은 세가지 값을 가집니다.

(1) Window - 기본 값입니다.
                  모든 객체보다 상위에 위치하게 만듭니다. embed된 동영상이 어떤 div등 html태그보다 상위에 위치하도록
                  설정됩니다.

(2) Opaque - embed된 동영상이 어떤 div등 html태그보다 하위에 위치하도록 설정됩니다.
                   즉, 해당 위치에 div등 html태그요소가 있을 때 동영상이 가려지겠금 설정되는 것입니다.

(3) Transparent - Opaque와 비슷합니다만 Opaque와 다른 점은 투명도를 줄 수 있다는 겁니다. 
                         즉, 완전히 가려지지 않고 일정 수치값만큼 보일 수 있게금 할 수 있게 한다는 것이죠.


이렇게 vmode를 사용하면 다른 태그와 겹칠 때 발생되는 문제를 해결할 수 있답니다...

후략...