diff options
Diffstat (limited to 'files/ko/web/css/z-index/index.html')
| -rw-r--r-- | files/ko/web/css/z-index/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/ko/web/css/z-index/index.html b/files/ko/web/css/z-index/index.html new file mode 100644 index 0000000000..0c3cb36b9e --- /dev/null +++ b/files/ko/web/css/z-index/index.html @@ -0,0 +1,138 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |