initial commit

1 files changed, 139 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/z-index/index.html b/files/zh-cn/web/css/z-index/index.html
new file mode 100644
index 0000000000..54ec0c54f3
--- /dev/null
+++ b/files/zh-cn/web/css/z-index/index.html
@@ -0,0 +1,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>