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을 이용하여 위로 올려 보이게 하거나 하는 효과를 줄 수 있습니다.

입력

<HTML>
    <HEAD>
        <TITLE>z-index Property</TITLE>
    <STYLE type="text/css">
    <!-- 
    .td_button{
    height:18px;
    background-color:royalblue;
    border:1px solid #808080;
    cursor:hand;
    font-size:11px;
    color:#EFEFEF;
    text-align:center;
    }
		
    #img_1{
    position:absolute;
    }
    /*id Selector를 사용하여 id를 지정하고 사용할 CSS Property도 함께 지정*/
    
    #p_1{
    position:absolute;
    color:3333FF;
    font:bold;
    }
    /*id Selector를 사용하여 id를 지정하고 사용할 CSS Property도 함께 지정*/
    
    .output{
    width:100%;
    background:#dfdfdf;
    font:11px/1.6em Verdana;
    padding:10px;
    text-align:justify;
    word-break:keep-all;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
      <DIV class="output" style="position:relative;height:90px;">
        <IMG src="../../html/images/AA17.jpg" id="img_1">
        <P id="p_1'">
        같은 위치에 Positioning 된 글자와 그림.
        </P>
      </DIV>
      <table width="100%" border="1" style="border:1px solid #000000;">
        <tr>
          <td class="td_button" onclick="img_1.style.zIndex='2';p_1.style.zIndex='1';">
              그림 앞으로!
          </td>
          <td class="td_button" onclick="img_1.style.zIndex='1';p_1.style.zIndex='2';">
              글자 앞으로!
          </td>
        </tr>
      </table>
    </BODY>
</HTML>