From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../adding_z-index/index.html | 164 ++++++++++++++ .../understanding_z_index/index.html | 49 +++++ .../stacking_and_float/index.html | 148 +++++++++++++ .../stacking_context_example_1/index.html | 138 ++++++++++++ .../stacking_context_example_2/index.html | 143 ++++++++++++ .../stacking_context_example_3/index.html | 191 ++++++++++++++++ .../stacking_without_z-index/index.html | 127 +++++++++++ .../the_stacking_context/index.html | 241 +++++++++++++++++++++ 8 files changed, 1201 insertions(+) create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (limited to 'files/ja/web/css/css_positioning/understanding_z_index') diff --git a/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..db4d102e1b --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,164 @@ +--- +title: z-index の使用 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{cssref}}
+ +

この記事の最初の部分、z-index なしの重ね合わせは、既定でどのように重ね合わせが行われるのかを説明します。独自の重ね合わせ順を定義したい場合は、位置指定要素に {{cssxref("z-index")}} プロパティを使用して行うことができます。

+ +

z-index プロパティは整数値 (正の数、ゼロ、負の数) で指定することができ、 Z 軸方向の要素の位置を表します。もし Z 軸になじみがないのであれば、重ね合わされたレイヤーがあって、それぞれに番号が付いていることを想像してください。レイヤーは番号順に、大きな番号は小さな番号の上に描画されます。

+ + + +
+

注:

+ + +
+ +

次の例では、レイヤーの重なり順が z-index を使って決め直されています。#5 の z-index は 、位置指定要素でないため効果を持ちません。

+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

関連情報

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..cd1337f9a5 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,49 @@ +--- +title: CSS の z-index を理解する +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

最も基本的な場合では、 HTML のページは二次元であると考えることができ、テキスト、画像、その他の要素が重なることなくページに並べられます。この場合、単一のレンダリングの流れがあり、すべての要素で他の要素との間で取る間隔が分かっています。 {{cssxref("z-index")}} 属性で、コンテンツの描画時にオブジェクトの重なり合いの順番を調整することができます。

+ +
+

CSS 2.1 では、各ボックスは三次元空間の座標を持ちます。ボックスは、水平方向と垂直方向に加えて、垂直方向の "z 軸" に沿って配置され、その中で一番上の1つが整形されます。 Z 軸の位置は、特にボックス同士が視覚的に重なる場合に関係します。

+
+ +

(CSS 2.1 Section 9.9.1 - Layered presentation より)

+ +

これは、 CSS のスタイル規則によって、ボックスを通常の描画レイヤー (レイヤー 0) 以外のレイヤーに配置できるということです。各レイヤーの Z 位置は、描画処理の重ね合わせ順を示す整数値で表現されます。数値が大きいほど、見ている人に近いことになります。 Z 位置は CSS の z-index プロパティで制御できます。

+ +

z-index を使うのは非常に簡単に見えます。単一のプロパティに、単一の整数値を割り当て、分かりやすい振舞いをします。しかし、 z-index を HTML 要素の複雑な階層に適用するとき、その振舞いは理解や予測がしづらくなることがあります。これは重ね合わせの規則が複雑であるためです。実際、 CSS 仕様書ではこれらの規則をもっと分かりやすく説明するために、専用の章である CSS-2.1 Appendix E が占められています。

+ +

この記事では、単純化といくつかの例によって、こうした規則の説明を行なってみます。

+ +
    +
  1. z-index なしの重ね合わせ: 既定の重ね合わせ規則
    2. +
  2. 浮動ブロックの重ね合わせ: 浮動要素が重ね合わせでどのように扱われるか
    3. +
  3. z-index の使用: z-index を使って既定の重ね合わせ変更する方法
    4. +
  4. 重ね合わせコンテキスト: 重ね合わせコンテキストについてのメモ
    5. +
  5. 重ね合わせコンテキストの例 1: 2階層の HTML 構造で、最終階層の z-index
    6. +
  6. 重ね合わせコンテキストの例 2: 2階層の HTML 構造、全レベルの z-index
    7. +
  7. 重ね合わせコンテキストの例 3: 3階層の HTML 構造、第2階層の z-index
    8. +
+ +
+

原典情報

+ + + +

著者のメモ: Wladimir Palant と Rod Whiteley、レビューありがとう。

+
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..375d11f2a4 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,148 @@ +--- +title: 浮動ブロックの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

浮動 (floated) ブロックについては、重ね合わせ順序が少し異なります。浮動ブロックは位置指定なしのブロックと位置指定ブロックの間に配置されます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 浮動ブロック
    4. +
  4. 位置指定要素、 HTML 内での出現順
    5. +
+ +

実際、以下の例に見られるように、位置指定なしのブロック (DIV #4) の背景と境界は、完全に浮動ブロックの影響を受けませんが、内容は影響を受けます。この挙動は、上記のリストに規則を追加することで示すことができます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 浮動ブロック
    4. +
  4. 位置指定なしのインライン要素の子孫
    5. +
  5. 位置指定要素、 HTML 内での出現順
    6. +
+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 250)}}

+ +
+

注: 位置指定なしのブロック (DIV #4) の opacity の値を変更すると、そのブロックの背景と境界が、浮動ブロックや位置指定ブロックの上に飛び出し、おかしな結果になります。これは、仕様書の中で、 opacity の値を適用すると新しい重ね合わせコンテキストを作成するという、奇妙な部分によるものです (What No One Told You About Z-Index を参照してください)。

+
+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+<div id="rel1">
+  <b>DIV #6</b><br />position: relative;</div>
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 80px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+
+#rel1 {
+  position: relative;
+  border: 1px dashed #996;
+  background-color: #cff;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+ +

関連情報

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..430a63eca1 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,138 @@ +--- +title: 重ね合わせコンテキストの例 1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 1

+ +

基礎的な例から始めましょう。ルートの重ね合わせコンテキストに、2つの DIV (DIV #1 と DIV #3) があって、どちらも relative の位置指定がされていますが、 z-index プロパティの指定はありません。 DIV #1 の中に absolute の位置指定がされた DIV #2 があり、一方 DIV #3 の中には absolute の位置指定がされた DIV #4 があります。どちらも z-index プロパティの指定はありません。

+ +

唯一の重ね合わせコンテキストはルート要素にあります。 z-indexe がなければ要素は出現した順に重なります。

+ +

重ね合わせコンテキストの例 1

+ +

DIV #2 に正の (ゼロでなく auto でもない) z-index 値が代入されれば、他のどの DIV よりも上に描画されます。

+ +

重ね合わせコンテキストの例 1

+ +

さらにまた、DIV #4 に DIV #2 のものより大きな正の z-index が代入されれば、DIV #4 は、DIV #2を含む他のどの要素よりも上に描画されます。

+ +

重ね合わせコンテキストの例 1

+ +

最後に見た例では、 DIV #2 と DIV #4 が兄弟要素ではないことがわかります。これは、HTML 要素の階層構造においては、それぞれ別の親要素を持っているからです。そうだとしても、DIV #4 と DIV #2 間の重なり順は、z-index を使って制御できます。たまたま、DIV #1 と DIV #3 には z-index 値が代入されていなかったため、重ね合わせコンテキストを作らなかったのです。これは、DIV #2 と DIV #3 を含むそれら要素の中身がどれも、同一のルートの重ね合わせコンテキストに含まれるということです。

+ +

重ね合わせコンテキストの見地からは、DIV #1 と DIV #3 は単にルート要素に吸収され、結果の階層構造は次のようになっています:

+ + + +
注: DIV #1 と DIV #3 は半透明ではありません。位置指定された要素に1未満の不透明度を与えると、ちょうど z-index 値を追加したのと同じように、暗黙的に重ね合わせコンテキストが作られることを忘れないのは大切です。また、この例は、親要素が重ね合わせコンテキストを作らないときに、何が起こるのかを示しています。
+ +

例

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

関連情報

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..a99befee8d --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,143 @@ +--- +title: 重ね合わせコンテキストの例 2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 2

+ +

これはとても簡単な例ですが、重ね合わせコンテキストの概念を理解するカギになります。前の例には同じ 4 つの DIV 要素がありましたが、今度は両方の階層構造で z-index プロパティが設定されています。

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270') }}

+ +

DIV #2 (z-index: 2) が DIV #3 (z-index: 1) よりも上にあることがわかります。これは、どちらも同じ重ね合わせコンテキスト（ルートのもの）に属していて、z-index 値が要素の重なり方を決めているからです。

+ +

変に思えるかもしれないのは、z-index の値に関わらず、DIV #2 (z-index: 2) が DIV #4 (z-index: 10) よりも上にあることです。この理由は、これらの要素が同一の重ね合わせコンテキストに属していないためです。DIV #4 は DIV #3 によって作られた重ね合わせコンテキストに所属していて、以前の説明にあるように DIV #3 (とその内部にあるものすべて) は DIV #2 よりも下にあります。

+ +

状況をもっとよく理解するために、重ね合わせコンテキストの階層構造をご覧ください:

+ + + +
注: 一般に、 HTML の階層構造は重ね合わせコンテキストの階層構造と異なることを忘れないほうが良いでしょう。重ね合わせコンテキストの階層構造では、重ね合わせコンテキストを作らない要素はその親要素に吸収されます。
+ +

例のソースコード

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

関連情報

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..ab325c9242 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,191 @@ +--- +title: 重ね合わせコンテキストの例 3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +tags: + - Advanced + - CSS + - Guide + - Understanding_CSS_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{cssref}}
+ +

« CSS « CSS の z-index を理解する

+ +

重ね合わせコンテキストの例 3

+ +

この最後の例では、複数の階層を持つ HTML 構造内で、位置指定された要素を組み合わせたときと、 z-index がクラスセレクターを使って設定されたとき、発生する問題を示します。

+ +

位置指定された DIV 要素で作られた、三階層の階層メニューを一例として見てみましょう。第二階層と第三階層の DIV 要素は、マウスが親要素をホバーしたり、クリックしたりすると現れます。通常この種類のメニューはクライアントサイドかサーバーサイドのどちらかでスクリプトにより生成されます。このためスタイルルールは id セレクターではなく、クラスセレクターで割り当てられます。

+ +

もし 3 つのメニュー階層が部分的に重なると、重なりの管理が問題になるかもしれません。

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330') }}

+ +

第一階層のメニューは relative で位置指定されているだけなので、重ね合わせコンテキストは作られません。

+ +

第二階層のメニューは、親要素内で absolute で位置指定されています。これを第一階層のすべてのメニューより上に置くために、z-index が使われています。問題は第二階層のメニューそれぞれに重ね合わせコンテキストが作られることと、第三階層のメニューが自分の親要素に属していることです。

+ +

したがって第三階層のメニューは後ろにある第二階層のメニューより下に重なりますが、これは第二階層のメニューがすべて同一の z-index 値を持っていて、デフォルトの重ね合わせ規則が適用されるからです。

+ +

状況をもっとよく理解できるよう、重ね合わせコンテキストの階層図を用意しました。

+ + + +

この問題を回避するには、異なるレベル間のメニューの重なりを取り除くか、独自 (で異なった) z-index 値を クラスセレクターではなく ID セレクターを通じて設定するか、 HTML の階層構造をなくすかしてください。

+ +
注: ソースコードを見ると、absolute で位置指定されたコンテナーとなる要素内に、第二階層と第三階層のメニューを作る DIV があることがわかります。この方法は、一度にすべてをグループ化し、位置づけするのに便利です。
+ +

例のソースコード

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

関連情報

+ + + +
+

原典情報

+ + +
+ +

注: 実は、サンプル画像は間違っているようです。第二階層が第三階層に重複しているのは、第二階層が半透明であるため、新しい重ね合わせコンテキストが作成されるからです。基本的に、このサンプルページ全体が誤っており、誤解を招きます。

diff --git a/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..b076f8b7c2 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,127 @@ +--- +title: z-index なしの重ね合わせ +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - Advanced + - CSS + - Guide + - Reference + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{cssref}}
+ +

どの要素にも {{cssxref("z-index")}} プロパティが指定されていない場合、要素は以下の順序に (下から上に) 重ね合わせられます。

+ +
    +
  1. ルート要素の背景と境界
    2. +
  2. 位置指定なしのブロックの子孫、 HTML 内での出現順
    3. +
  3. 位置指定要素、 HTML 内での出現順
    4. +
+ +

{{cssxref("order")}} プロパティによって {{cssxref("flex")}} コンテナーの中の描画を「HTML の中での出現順」から変更したとき、重ね合わせコンテキストの順も同様に影響することを意識しておいて下さい。

+ +

以下の例では、 #1 から #4 までの要素が位置指定要素です。 #5 の要素は static であり、 HTML マークアップの中で後に来ていたとしても、他の4つの要素の下に描かれます。

+ +

{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+ +

例のソースコード

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

関連情報

+ + + +
+

原典情報

+ + +
diff --git a/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..57daec3c78 --- /dev/null +++ b/files/ja/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,241 @@ +--- +title: 重ね合わせコンテキスト +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Reference + - z-index + - ガイド +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は、要素の属性に基づいてこの空間を優先度つきの順序で占有します。

+ +

重ね合わせコンテキスト

+ +

この記事の前の部分である z-index の使用では、ある要素の描画順はそれらの z-index の値に影響を受けていました。これは、要素が重ね合わせコンテキストを生じさせる特別なプロパティを持っていたからです。

+ +

重ね合わせコンテキストは以下のような場面で、文書の随所に様々な要素によって構成されます。

+ + + +

重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の z-index 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。

+ +

まとめると、

+ + + +
注: 重ね合わせコンテキストを作れるのが一部の要素に限定されるため、重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。それ自身の重ね合わせコンテキストを作らない要素は、その親の重ね合わせコンテキストに同化される、と言えます。
+ +

例

+ +

Example of stacking rules modified using z-index

+ +

この例では、配置要素はすべて、位置と z-index の値によって、それ自身の重ね合わせコンテキストを作ります。重ね合わせコンテキストの階層構造が、次のように構成されます。

+ + + +

重要なのは、 DIV #4, DIV #5, DIV #6 は DIV #3 の子要素なので、DIV #3 の内側で重なり方が完全に決まることです。一旦 DIV #3 内部の重ね合わせと描画が終われば、DIV #3 はルート要素に丸ごと渡され、兄弟要素との重ね合わせ処理が行われます。

+ +
+

注:

+ + +
+ +

例

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', '100%', '396') }}

+ +

関連情報

+ + + +
+

原典情報

+ + +
-- cgit v1.2.3-54-g00ecf