--- title: z-index slug: Web/CSS/z-index tags: - CSS - CSS Positioning - CSS Property - Reference translation_of: Web/CSS/z-index --- <div>{{CSSRef}}</div> <p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>z-index</code></strong> 속성은 <a href="/ko/docs/Web/CSS/position">위치 지정 요소</a>와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 <code>z-index</code> 값을 가진 요소가 작은 값의 요소 위를 덮습니다.</p> <div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div> <p>위치 지정 요소(<code>position</code>이 <code>static</code> 외의 다른 값인 요소)의 박스에 대해, <code>z-index</code> 속성은 다음 항목을 지정합니다.</p> <ol> <li>현재 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>에서 자신의 위치.</li> <li>자신만의 쌓임 맥락 생성 여부.</li> </ol> <h2 id="구문">구문</h2> <pre class="brush: css">/* 키워드 값 */ z-index: auto; /* <integer> 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */ /* 전역 값 */ z-index: inherit; z-index: initial; z-index: unset;</pre> <p>z-index 속성은 <code>{{anch("auto")}}</code> 키워드 또는 <code>{{anch("<integer>")}}</code> 값을 사용해 지정할 수 있습니다.</p> <h3 id="값">값</h3> <dl> <dt><a id="auto" name="auto"><code>auto</code></a></dt> <dd>박스가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모 요소와 동일합니다.</dd> <dt><a id="<integer>" name="<integer>">{{cssxref("<integer>")}}</a></dt> <dd>현재 쌓임 맥락에서의 위치로 이 값을 사용합니다. 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 <code>0</code>으로 설정합니다. 이로 인해 자손의 <code>z-index</code>를 자기 외의 바깥 요소와 비교하지 않습니다.</dd> </dl> <h3 id="형식_구문">형식 구문</h3> {{csssyntax}} <h2 id="예제">예제</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div> </pre> <h3 id="CSS">CSS</h3> <pre class="brush: css; highlight:[3,11,19]">.dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } </pre> <h3 id="결과">결과</h3> <p>{{ EmbedLiveSample('예제', '550', '200', '') }}</p> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'visibility') }}</td> <td>{{ Spec2('CSS3 Transitions') }}</td> <td>Defines <code>visibility</code> as animatable.</td> </tr> <tr> <td>{{ SpecName('CSS2.1', 'visuren.html#z-index', 'z-index') }}</td> <td>{{ Spec2('CSS2.1') }}</td> <td>Initial specification.</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("css.properties.z-index")}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>CSS {{ Cssxref("position") }} 속성</li> <li><a href="/ko/docs/Web/CSS/Understanding_z-index" title="ko/CSS/Understanding_z-index">CSS z-index 이해하기</a></li> </ul>