CSS Positioned Layout のプロパティの文書を更新

- 2021/11/06 時点の英語版に同期

1 files changed, 64 insertions, 77 deletions

diff --git a/files/ja/web/css/z-index/index.md b/files/ja/web/css/z-index/index.md
index 18fc3d358e..a1da869e47 100644
--- a/files/ja/web/css/z-index/index.md
+++ b/files/ja/web/css/z-index/index.md
@@ -3,71 +3,82 @@ title: z-index
 slug: Web/CSS/z-index
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 位置指定レイアウト
-  - Reference
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.z-index
 translation_of: Web/CSS/z-index
 ---
-<div>{{CSSRef}}</div>
-
-<p>CSS の <strong><code>z-index</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/position">位置指定</a>要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+**`z-index`** は CSS のプロパティで、[位置指定](/ja/docs/Web/CSS/position)要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+{{EmbedInteractiveExample("pages/css/z-index.html")}}
 
-<p>位置指定されたボックス (つまり、 <code>position</code> が <code>static</code> 以外のもの) では、 <code>z-index</code> プロパティが以下のことを定義します。</p>
+位置指定されたボックス (つまり、`position` が `static` 以外のもの) では、`z-index` プロパティが以下のことを定義します。
 
-<ol>
- <li>現在の<a href="/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a>におけるボックスの重ね合わせレベル</li>
- <li>ボックスがローカルな重ね合わせコンテキストを作るかどうか</li>
-</ol>
+1.  現在の[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)におけるボックスの重ね合わせレベル
+2.  ボックスがローカルな重ね合わせコンテキストを作るかどうか
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 z-index: auto;
 
-/* &lt;integer&gt; 値 */
+/* <integer> 値 */
 z-index: 0;
 z-index: 3;
 z-index: 289;
-z-index: -1; /* 負の数は優先度を下げる */
+z-index: -1; /* 負の数はより低い優先度になる */
 
 /* グローバル値 */
 z-index: inherit;
 z-index: initial;
+z-index: revert;
 z-index: unset;
-</pre>
+```
+
+`z-index` プロパティは、キーワード `auto` または `<integer>` のどちらかで指定します。
+
+### 値
 
-<p><code>z-index</code> プロパティは、キーワード <code><a href="#auto">auto</a></code> 又は <code><a href="#&lt;integer>">&lt;integer&gt;</a></code> のどちらかで指定します。</p>
+- `auto`
+  - : ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。
+- `<integer>`
+  - : この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル `0` のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><a id="auto" name="auto"><code>auto</code></a></dt>
- <dd>ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。</dd>
- <dt><a id="&lt;integer>" name="&lt;integer>"><code>&lt;integer&gt;</code></a></dt>
- <dd>この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル <code>0</code> のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。</dd>
-</dl>
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式定義
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+<h3 id="Visually_layering_elements">視覚的な階層を持つ要素</h3>
 
-<pre class="brush: html">&lt;div class="dashed-box"&gt;Dashed box
-  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
-  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+#### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+<div class="wrapper">
+  <div class="dashed-box">Dashed box</div>
+  <div class="gold-box">Gold box</div>
+  <div class="green-box">Green box</div>
+</div>
+```
+
+#### CSS
+
+```css
+.wrapper {
+  position: relative;
+}
 
-<pre class="brush: css; highlight:[3,11,19]">.dashed-box {
+.dashed-box {
   position: relative;
   z-index: 1;
   border: dashed;
@@ -93,45 +104,21 @@ z-index: unset;
   height: 7em;
   opacity: 0.9;
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td><code>z-index</code> をアニメーション可能として定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.z-index")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>CSS {{Cssxref("position")}} プロパティ</li>
- <li><a href="/ja/docs/Web/CSS/Understanding_z-index">CSS の z-index の理解</a></li>
-</ul>
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- CSS {{Cssxref("position")}} プロパティ
+- [CSS の z-index を理解する](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index)