files/zh-cn/web/css/z-index/index.html


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
139

---
title: z-index
slug: Web/CSS/z-index
tags:
  - CSS
  - CSS定位
  - CSS属性
translation_of: Web/CSS/z-index
---
<div>{{CSSRef}}</div>

<p><code>z-index</code> 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。</p>

<p>{{EmbedInteractiveExample("pages/css/z-index.html")}}</p>

<p class="hidden">本互动示例中源代码储存在 GitHub 仓库中。若你想要为互动示例项目贡献（代码），请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并给我们发送合并代码请求。</p>

<p>对于一个已经定位的盒子（即其 <code>position</code> 属性值不是 <code>static</code>，这里要注意的是 CSS 把元素看作盒子），<code>z-index</code> 属性指定：</p>

<ol>
 <li>盒子在当前堆叠上下文中的堆叠层级。</li>
 <li>盒子是否创建一个本地堆叠上下文。</li>
</ol>

<h2 id="语法">语法</h2>

<pre class="brush:css  language-css notranslate">/* 字符值 */
z-index: auto;

/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用负值降低优先级 */

/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;</pre>

<p><code>z-index</code> 属性可以被设定为关键词 <code><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/z-index$edit#auto">auto</a></code> 或 <code><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/z-index$edit#&lt;integer>">&lt;integer&gt;</a></code>。</p>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。</dd>
 <dt><code>&lt;integer&gt;</code></dt>
 <dd>{{cssxref("&lt;integer&gt;")}}（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。</dd>
</dl>

<h3 id="格式化语法">格式化语法</h3>

<pre class="syntaxbox notranslate">{{csssyntax("z-index")}}
</pre>

<h2 id="示例">示例</h2>

<h3 id="HTML" style="font-size: 1.28571428571429rem;">HTML</h3>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;div class="dashed-box"&gt;Dashed box&lt;/div&gt;
  &lt;div class="gold-box"&gt;Gold box&lt;/div&gt;
  &lt;div class="green-box"&gt;Green box&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">.wrapper {
  position: relative;
}

.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', 'animation behavior for z-index')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>z-index</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>原始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">本页面的兼容性表格由结构化数据生产。若你想要贡献数据，请移步 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送合并代码请求。</div>

<p>{{Compat("css.properties.z-index")}}</p>

<h2 id="参阅">参阅</h2>

<ul>
 <li>CSS {{Cssxref("position")}} 属性</li>
 <li><a href="/en-US/docs/CSS/Understanding_z-index">理解 CSS z-indexes</a></li>
</ul>