1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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>
{{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>
|
