z-index

요약

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

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

초기값	`auto`
적용대상	positioned elements
상속	no
Media	visual
Computed value	as specified
Animatable	yes, as an integer
Canonical order	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

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.

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	?	?	?	?	?