From ce31153ae37ba4bb6559cea6bd1b0f99754f4311 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 13:13:32 +0900 Subject: CSS Positioned Layout のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/06 時点の英語版に同期 --- files/ja/web/css/z-index/index.md | 141 +++++++++++++++++--------------------- 1 file changed, 64 insertions(+), 77 deletions(-) (limited to 'files/ja/web/css/z-index') 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 --- -
{{CSSRef}}
- -

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+**`z-index`** は CSS のプロパティで、[位置指定](/ja/docs/Web/CSS/position)要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。 - +{{EmbedInteractiveExample("pages/css/z-index.html")}} -

位置指定されたボックス (つまり、 position が static 以外のもの) では、 z-index プロパティが以下のことを定義します。

+位置指定されたボックス (つまり、`position` が `static` 以外のもの) では、`z-index` プロパティが以下のことを定義します。 -
    -
  1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
    2. -
  2. ボックスがローカルな重ね合わせコンテキストを作るかどうか
    3. -
+1. 現在の[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)におけるボックスの重ね合わせレベル +2. ボックスがローカルな重ね合わせコンテキストを作るかどうか -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 z-index: auto;
 
-/* <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;
-
+``` + +`z-index` プロパティは、キーワード `auto` または `` のどちらかで指定します。 + +### 値 -

z-index プロパティは、キーワード auto 又は <integer> のどちらかで指定します。

+- `auto` + - : ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。 +- `` + - : この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル `0` のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。 -

値

+## 公式定義 -
-
auto
-
ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。
-
<integer>
-
この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。
-
+{{cssinfo}} -

形式文法

+## 形式定義 {{csssyntax}} -

例

+## 例 -

HTML

+

視覚的な階層を持つ要素

-
<div class="dashed-box">Dashed box
-  <span class="gold-box">Gold box</span>
-  <span class="green-box">Green box</span>
-</div>
-
+#### HTML -

CSS

+```html +
+
Dashed box
+
Gold box
+
Green box
+
+``` + +#### CSS + +```css +.wrapper { + position: relative; +} -
.dashed-box {
+.dashed-box {
   position: relative;
   z-index: 1;
   border: dashed;
@@ -93,45 +104,21 @@ z-index: unset;
   height: 7em;
   opacity: 0.9;
 }
-
- -

結果

- -

{{ EmbedLiveSample('Examples', '550', '200', '') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}z-index をアニメーション可能として定義
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.z-index")}}

- -

関連情報

- - +``` + +#### 結果 + +{{ EmbedLiveSample('Visually_layering_elements', '550', '200', '') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS {{Cssxref("position")}} プロパティ +- [CSS の z-index を理解する](/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index) -- cgit v1.2.3-54-g00ecf