Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
검색 결과

    z-index

    요약

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

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

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

    문법

    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 Working Draft Defines visibility as animatable.
    CSS Level 2 (Revision 1) 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 ? ? ? ? ?

    더 보기

    문서 태그 및 공헌자

    Contributors to this page: jaemin_jo, teoli
    최종 변경: teoli,