z-index

위치가 지정된 개체의 쌓기 순서를 설정합니다.

구문

{ z-index: vOrder}

사용할 수 있는 값

vOrder

다음 값 중 하나를 지정하거나 받는 변형:

속성은 auto를 기본값으로 가집니다. 이것은 상속되지 않습니다.

설명

양수 z-index 값은 음수(또는 더 작은 값) z-index보다 위에 배치됩니다. z-index가 동일한 두 개체가 원본 순서대로 쌓입니다. 양수 값은 요소를 z-index가 정의되지 않은 텍스트 위에 배치하지만 음수 값은 아래에 배치합니다. 속성을 제거하려면 이 매개 변수를 Null로 설정하십시오.

z-index 속성은 position 속성을 relative 또는 absolute로 설정한 개체에만 적용됩니다.

select 개체와 같은 창 형식의 컨트롤에는 해당 속성이 적용되지 않습니다.

마우스와 같은 위치 지시 장치의 입력은 중첩 요소가 보이지 않는 경우에도 중첩 요소를 관통하지 않습니다. 이 특성은 다음과 같은 경우을 제외하고 z-index가 음수인 위치 지정된 요소에도 적용됩니다.

• 부모가 스크롤링 컨테이너인 경우(즉, 해당 overflow 속성이 auto 또는 scroll로 설정된 경우)

• 부모의 위치가 지정된 경우(즉, 해당 position 속성이 absolute, relative 또는 fixed로 설정된 경우)

예

이 예에서는 z-index 속성을 사용하여 개체의 쌓기 순서를 변경합니다. 이 예에서는 인라인 스타일시트를 사용하여 쌓기 순서를 설정합니다.

<img src="cone.jpg" style="position:absolute; 
    top:100px; left:100px; z-index:4"/>
<div style="position:absolute; top:100; left:100;
    color:red; background-color:beige; font-weight:bold; 
    z-index:1">
. . . </div>

표준 정보

이 속성은 Cascading Style Sheets (CSS), Level 2 (CSS2)(CSS(CSS 스타일시트), 수준 2(CSS 2))에 정의되어 있습니다.

적용 대상

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DFN, DIV, DL, DT, EM, FIELDSET, FORM, I, IFRAME, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, LI, OL, P, S, SPAN, SUB, TABLE, TBODY, TD, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

참조

개념

position