개체들의 쌓인(stack) 순서를 반환하거나 설정한다.

NS: event.zIndex|=indexVal]

인수

cssSelector : (스타일 선택자)

속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 인수값)

스타일 속성은 개체들의 쌓인(stack) 순서를 나타내는 인수값이다.

auto	디폴트이며, 개체들이 HTML 문서의 원본에 나타나는 순서대로 쌓이고 위에서부터 차례로 아래 깔린다.
(순서)	개체들의 쌓인(stack) 순서를 나타내는 정수값이다.

0 이상의 정수값으로 낮은 수치부터 스태킹되어, 높은 수치의 개체가 위에 나타난다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 auto이다.

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

양수 z-index 값은 낮은값 혹은 음수z-index를 갖는 개체보다 위(above)에 나타난다. 두 개체가 같은 z-index 값을 가지면 원본 문서에 나타나는 순서대로 스태킹된다. 양수 z-index 값을 갖는 개체는 z-index 값이 설정되지 않는 개체의 위에 스태킹되고, 음수 값을 갖는 개체은 설정하지 않은 개체의 아래 스태킹된다. 파라메터를 null로 설정하면 그 애트리뷰트가 제거된다.

zIndex 속성은 position 속성이 relative나 absolute로 설정된 경우에만 적용된다.

이 속성은 select 개체와 같은 윈도우 제어에는 적용되지 않는다.

이전 버전에서는 iFrame 개체는 윈도에 있고 모든 윈도우 제어는 zIndex 속성을 무시했었으나, IE5.5에서 iFrame 개체는 윈도우가 없고 zIndex 속성을 지원한다. zIndex 속성을 지원하지 않는 이전 버전에서 작성한 웹페이지를 유지하려면, 특히 select 개체와 같은 윈도우 제어 위에 스태킹된 iFrame 개체를 포함하고 있으면, 문서를 다시 디자인해야 할 것이다. 이경우 visibility 애트리뷰트로 원하는 iFrame 개체를 겹치는 윈도우의 제어를 감출 수 있다. 또한 iFrame 개체가 그 개체에 겹치지 않도록 윈도우 제어를 position 속성으로 위치시킬 수 있다.

엘레멘트가 보이지 않는 것이라도, 마우스와 같은 입력 포인팅 장치로 겹쳐진 엘레멘트를 통과할 수 없다. 다음의 경우가 아니면 음수 z-index 속성값에서도 마찬가지이다.

• 모체가 overflow 속성이 auto나 scroll로 설정된 스크롤 용기인 경우.
• 모체가 position 속성이 absolute나 relative로 설정되어 위치된 경우.

Netscape 설명

layer 개체에 적용되고, above 또는 below 속성을 구현하기 위해서 다른 파라메터를 필요로 하는데 이것이 zIndex 이다.
이 zIndex 속성값이 클수록 아랫쪽에 깔리고, 그 값을 조정하므로서 단순히 수직, 수평 위치 조정 뿐아니라 screen에서 윗층으로 혹은 아래층으로 탄력적으로 움직이게 할 수 있다.

적용

개체	script	CSS	IE 버전

참조

이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.

NS 적용 layer 개체, above, below 속성

DIV 지역

divObj.style.zIndex

결과 표시창

z-index 애트리뷰트를 설정하고 zIndex 속성값을 변경하여 보이는 순서를 바꾼다.

<SCRIPT>
function ShowAll(){
  if (divObj.style.zIndex==1) divObj.style.zIndex=5;
  else divObj.style.zIndex=1;
  str='imgObj.style.zIndex='+imgObj.style.zIndex+'<BR>';
  str+='divObj.style.zIndex='+divObj.style.zIndex+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<IMG id="imgObj" src="../../gif/rfexample.gif" style="position:relative;top:10;left:0;z-index:3" height=25>
<DIV id="divObj" style="position:relative;top:-20;left:10;padding:5;color:blue;
  background-color:ffa;font-weight:bold;border:solid 1 blue;z-index:1">DIV 지역</DIV>
<BUTTON onclick="ShowAll()">divObj.style.zIndex</BUTTON>
<DIV id=showA>결과 표시창</DIV>

결과 표시창

이미지 위를 클릭해보라.

<SCRIPT>
function showzIndex(){
  str='img1.style.zIndex='+img1.style.zIndex+'<BR>';
  str+='img2.style.zIndex='+img2.style.zIndex+'<BR>';
  showB.innerHTML=str;
}
</SCRIPT>
<IMG id="img1" src="../../gif/rfexample.gif" height="24" style="position:relative;top:0;left:5;"
  onclick="img1.style.zIndex=1; img2.style.zIndex=2;showzIndex()">
<IMG id="img2" src="../../gif/rfstyle.gif" height="24" style="position:relative;top:0;left:-50;"
  onclick="img1.style.zIndex=2; img2.style.zIndex=1;showzIndex()">
<DIV id=showB>결과 표시창</DIV>

DIV 개체 예제 IE

개체를 클릭해 보라.

<DIV style="border:dotted 1 green;padding-bottom:30" onclick="change()">
<DIV id="obj1"
  style="position:relative;zIndex:1;border:solid 1 blue;background:lightgreen;width:150;height:50;top:30;left:40">개체 1</DIV>
<DIV id="obj2"
  style="position:relative;zIndex:5;border:solid 1 red;background:lightblue;width:160;height:30;top:10;left:10">개체 2</DIV>
</DIV>

<SCRIPT>
function change(){
  if (obj1.style.zIndex==1) obj1.style.zIndex=5;
  else obj1.style.zIndex=1;
  if (obj2.style.zIndex==5) obj2.style.zIndex=1;
  else obj2.style.zIndex=5;
}
</SCRIPT>

NS layer개체 예제

<layer name="layer1" zIndex=1 bgcolor="lightgreen" top="50" left="80" width="150" height="50">레이어 1</layer>
<layer name="layer2" zIndex=5 bgcolor="lightblue" top="20" left="50" width="75" height="100">레이어 2</layer>

<SCRIPT>
document.weite(document.layer1.zIndex+' '+document.blowLayer.zIndex);
document.layer1.zIndex=5;
document.layer2.zIndex=1;
document.weite(document.layer1.zIndex+' '+document.blowLayer.zIndex);
</SCRIPT>