---
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>