z-index

요약

z-index CSS 속성은 엘리먼트와 그 엘리먼트의 자손 엘리먼트들의 z축 순서를 지정한다. 엘리먼트들이 겹쳐졌을 때 z축 순서에 따라 어떤 엘리먼트가 위에 올지 결정된다. z-index가 높은 엘리먼트는 낮은 엘리먼트를 덮는다. 

위치가 지정된 엘리먼트에 대해 z-index 속성은 다음 내용을 기술한다. 

  1. 현재 stacking context에 대해 엘리먼트의 stack level
  2. 현재 엘리먼트가 새로운 지역 stacking context를 만드는지 여부

초기값auto
적용대상positioned elements
상속no
Mediavisual
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Creates stacking contextyes

문법

z-index:  auto | <integer> | inherit

값

auto
현재 엘리먼트는 새로운 지역 stacking context를 만들지 않는다. 현재 stacking context에 대한 엘리먼트의 stack level은 부모 엘리먼트의 stack level과 같다.
<integer>
이 integer값을 현재 stacking context에서 엘리먼트의 stack level로 지정한다. 또한 엘리먼트는 stack level이 0인 새로운 지역 stacking context를 만든다. 이것은 현재 엘리먼트의 자손 엘리먼트들은 자손들끼리만 비교가 일어나고 현재 엘리먼트 바깥의 엘리먼트들과는 비교가 일어나지 않음을 의미한다. 

예제

position:relative; z-index:1; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9 position:absolute; z-index:2; left:60px; top:3em;

명세

Specification Status Comment
CSS Transitions
The definition of 'visibility' in that specification.		 Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1)
The definition of 'z-index' in that specification.		 Recommendation Initial specification.

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 4.0 1.0
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec) 1.0 3.0 (1.9) 4.0 4.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

더 보기

관련 주제