z-index Property


Home > Document > CSS > Positioning > z-index

z-index Property

나모나 드림위버 등의 Program 에서 레이어(Layer)라고 부르는 Property 입니다. z-index에서 'z'가 무엇을 의미 하는지 알아보겠습니다. z-index를 사용하기 전까지 우리는 index라는 단어를 붙이지 않아서 그렇지, 사실 x-index, y-index 를 사용해 왔습니다. 가로 방향이 x 방향이고, 세로 방향이 y 축 인것 처럼 z 방향은 z 축을 뜻 합니다. z-index를 사용하면 x, y, z 축의 3차원 공간을 사용하게 되는 셈이죠. 모니터를 쳐다 봤을 때 나에게 가까워지는 방향이 z 축의 (+) 방향이고, 멀어지는 방향이 z 축의 (-) 방향입니다. 사용값은 정수만 가능하며, (-) 값도 사용할 수 있습니다. 레이어를 사용하게 되면 그림 위에 글씨를 위치 시킨다거나, 아래에 깔려서 안 보이는 물체를 Mouse action을 이용하여 위로 올려 보이게 하거나 하는 효과를 줄 수 있습니다.

  [표 보는 방법]
z-index Property
Value auto | <integer> | Inherit
Initial auto
Applies to positioned elements (position을 사용하여 위치가 지정된 물체)
Inherited no
Percentages N/A
Media Visual
HTML Syntax { z-index: sIndex }
Scripting object.style.zIndex [ = sIndex ]




CSS Scriting
onClick="this.style.zIndex='1';object.style.zIndex='2';"


출력결과

같은 위치에 Positioning 된 글자와 그림.

그림 앞으로! 글자 앞으로!


소스 보기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색